获得网页的背景色和字体颜色,方法如下:
思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 :
1 | var rgb = document.getElementById( 'color' ).style.backgroundColor; |
得到格式如下: rgb(225, 22, 23); 然后进行拆分:
1 | var rgb = rgb.split( '(' )[1]; |
再将 (225,22,23)字符串进行拆分(注意:只有number类型的才能转换,所以用 parseInt 强制转换类型!) :
1 | for ( var k = 0; k < 3; k++){ |
2 | str[k] = parseInt(rgb .split( ',' )[k]).toString(16); |
最后的组合:
1 | str = '#' +str[0]+str[1]+str[2]; |
整个代码如下:
04 | <title>getHexColor js/jQuery 获得十六进制颜色</title> |
05 | <meta charset= "utf-8" /> |
06 | <script type= "text/javascript" > |
07 | function getHexBgColor(){ |
09 | var rgb = document.getElementById( 'color' ).style.backgroundColor.split( '(' ); |
10 | for ( var k = 0; k < 3; k++){ |
11 | str[k] = parseInt(rgb[1].split( ',' )[k]).toString(16); |
13 | str = '#' +str[0]+str[1]+str[2]; |
14 | document.getElementById( 'color' ).innerHTML = str; |
16 | function getHexColor(){ |
18 | var rgb = document.getElementById( 'color' ).style.color.split( '(' ); |
19 | for ( var k = 0; k < 3; k++){ |
20 | str[k] = parseInt(rgb[1].split( ',' )[k]).toString(16); |
22 | str = '#' +str[0]+str[1]+str[2]; |
23 | document.getElementById( 'color' ).innerHTML = str; |
26 | <style type= "text/css" > |
36 | <div style= "color: #88ee22; background-color: #ef8989;" id= "color" ></div> |
37 | <input onclick= "getHexBgColor();" type= "button" value= "获得背景色" /> |
38 | <input onclick= "getHexColor();" type= "button" value= "获得字体颜色" /> |