js_javascript 기술을 사용하여 웹 페이지의 배경색과 글꼴 색상을 얻고 수정하는 방법
- WBOY원래의
- 2016-05-16 15:22:471919검색
이 글의 예시에서는 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.