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

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

WBOY

Release： 2016-05-16 15:22:47

Original

1939 people have browsed it

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 数组保存拆分后的数据
}

Copy after login

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>

Copy after login

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>

Copy after login

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