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

Home

Web Front-end

JS Tutorial

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

May 16, 2016 pm 04:54 PM

Web page background color

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

Copy code The code is as follows:

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

The format is as follows: rgb(225, 22, 23); Then split:

Copy code The code is as follows:

 
var rgb = rgb.split('(')[1]; //After splitting, it is [rgb, 225 ,22,23)] form, an array of length 2 

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

Copy code The code is as follows:

 
for(var k = 0; k < 3; k ){ 
str[k] = parseInt(rgb .split(',')[k]).toString(16);//str array saves the split data
} 

Final combination:

Copy the code The code is as follows:

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

The entire code is as follows:

Copy code The code is as follows:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>getHexColor js/ jQuery gets hexadecimal color</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="Get the background color" /> 
<input onclick="getHexColor();" type="button" value="Get the font color" /> 
 </body> 
</html> 

Statement of this Website

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