search

Home >Web Front-end >JS Tutorial >How to get and modify the background color and font color of the web page using js_javascript skills

How to get and modify the background color and font color of the web page using js_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:22:471912browse

The example in this article describes the method of obtaining and modifying the background color and font color of the web page using js. Share it with everyone for your reference, the details are as follows:

Get the background color and font color of the web page. The method is as follows:

Thought: What we get by getting the color attribute value is rgb color, which is not what we want, so we need to change the rgb color to hexadecimal color. First get the rgb color:

The code is as follows:

Copy code The code is as follows:
var rgb = document.getElementById('color').style.backgroundColor;

The obtained format is as follows: rgb(225, 22, 23); and then split:

The code is as follows:

Copy code The code is as follows:
var rgb = rgb.split('(')[1]; //Split After dividing, it is in the form of [rgb, 225,22,23)], an array of length 2

Then split the (225,22,23) string (note: only number type can be converted, so use parseInt to force conversion type!):

The code is as follows:

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

Final combination:

The code is as follows:

Copy code The code is as follows:
str = '#'+str[0]+str[1]+str[ 2];

The complete code is as follows: 
<!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>

The method to change the background color using javascript is as follows: 

<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>

I hope this article will be helpful to everyone in JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js implements text vertical scrolling and mouse hover effects_javascript skillsNext article：js implements text vertical scrolling and mouse hover effects_javascript skills

Related articles

See more