집 > 기사 > 웹 프론트엔드 > js_javascript 기술을 사용하여 웹 페이지의 배경색과 글꼴 색상을 얻고 수정하는 방법

js_javascript 기술을 사용하여 웹 페이지의 배경색과 글꼴 색상을 얻고 수정하는 방법

WBOY원래의: 2016-05-16 15:22:471881검색

이 글의 예시에서는 js를 이용하여 웹페이지의 배경색과 글꼴 색상을 얻고 수정하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

웹 페이지의 배경색과 글꼴 색상을 가져오는 방법은 다음과 같습니다.

생각: 색상 속성 값을 얻어서 얻는 것은 RGB 색상인데, 이는 우리가 원하는 색상이 아니므로 RGB 색상을 16진수 색상으로 먼저 변경해야 합니다.

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var rgb = document.getElementById('color').style.BackgroundColor ;

얻은 형식은 다음과 같습니다: rgb(225, 22, 23) 그리고 분할:

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var rgb = rgb.split('(')[1]; //Split 나눈 후 [rgb, 225,22,23)] 형태로 되어 있으며, 길이가 2인 배열

그런 다음 (225,22,23) 문자열을 분할합니다(참고: 숫자 유형만 변환할 수 있으므로 변환 유형을 강제로 적용하려면parseInt를 사용하세요!):

코드는 다음과 같습니다.

for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 数组保存拆分后的数据
}

최종 조합:

코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

str = '#' str[0] str[1] str[ 2];

전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<title>getHexColor js/jQuery 获得十六进制颜色</title>
<meta charset="utf-8" />
<script type="text/javascript">
function getHexBgColor(){
var str = [];
var rgb = document.getElementById('color').style.backgroundColor.split('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
}
str = '#'+str[0]+str[1]+str[2];
document.getElementById('color').innerHTML = str;
}
function getHexColor(){
var str = [];
var rgb = document.getElementById('color').style.color.split('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
}
str = '#'+str[0]+str[1]+str[2];
document.getElementById('color').innerHTML = str;
}
</script>
<style type="text/css">
#color{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div style="color: #88ee22; background-color: #ef8989;" id="color"></div>
<input onclick="getHexBgColor();" type="button" value="获得背景色" />
<input onclick="getHexColor();" type="button" value="获得字体颜色" />
</body>
</html>

자바스크립트를 이용하여 배경색을 변경하는 방법은 다음과 같습니다.

<body leftmargin=5 topmargin=0 onmouseover="document_onmouseover();"onclick="document_onclick();" id="all" >
<SCRIPT LANGUAGE="javascript">
var curObj= null;
var curObjmouseover=null;
function document_onclick() {
if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){
if(curObjmouseover!=null)
curObjmouseover.style.background='';
if(curObj!=null)
curObj.style.background='';
curObj=window.event.srcElement;
curObj.style.background='#ff0099';
  }
}
function document_onmouseover() {
if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){
if(curObjmouseover!=null)
{curObjmouseover.style.background='';
curObjmouseover.style.color='#000000';}
if(curObj!=null)
curObj.style.background='';
curObjmouseover=window.event.srcElement;
curObjmouseover.style.background='#cccc00';
curObjmouseover.style.color='#ffffff';
  }
}
 </SCRIPT>
<div>
 <a href='#'>来自脚本之家</a> </div>
<div> <a href='#'>来自脚本之家</a> </div>

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：js는 텍스트 수직 스크롤 및 마우스 호버 효과_javascript 기술을 구현합니다.다음 기사：js는 텍스트 수직 스크롤 및 마우스 호버 효과_javascript 기술을 구현합니다.

js_javascript 기술을 사용하여 웹 페이지의 배경색과 글꼴 색상을 얻고 수정하는 방법

관련 기사