编程 Javascript

js获得网页背景色和字体色的方法

Posted in Javascript onMarch 21, 2014

获得网页的背景色和字体颜色，方法如下：

思想：通过取得颜色属性值得到的是 rgb 色，不是我们想要的，所以需要将 rgb 色装换为十六进制色，首先获得rgb色：

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

得到格式如下： rgb(225, 22, 23); 然后进行拆分：

var rgb = rgb.split('(')[1]; //拆分后为 [rgb, 225,22,23)]形式，长度为2的数组

再将（225,22,23）字符串进行拆分（注意：只有number类型的才能转换，所以用 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>

js获得网页背景色和字体色的方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

关于Javascript 的 prototype问题。

Jan 03 Javascript

可以显示单图片，多图片ajax请求的ThickBox3.1类下载

Dec 23 Javascript

Tips 带三角可关闭的文字提示

Oct 06 Javascript

jQuery学习笔记更改jQuery对象

Sep 19 Javascript

JS 实现Json查询的方法实例

Apr 12 Javascript

JavaScript中instanceof与typeof运算符的用法及区别详细解析

Nov 19 Javascript

一个js导致的jquery失效问题的解决方法

Nov 27 Javascript

jquery text()方法取标签中的文本

Jul 25 Javascript

javascript中为某个元素指定事件的三种方式

Aug 07 Javascript

轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

Nov 30 Javascript

Js+Ajax,Get和Post在使用上的区别小结

Jun 08 Javascript

防止页面url缓存中ajax中post请求的处理方法

Oct 10 Javascript

页面装载js及性能分析方法介绍

Mar 21 #Javascript

Js冒泡事件详解及阻止示例

Mar 21 #Javascript

js调用浏览器打印模块实现点击按钮触发自定义函数

Mar 21 #Javascript

js中把JSON字符串转换成JSON对象最好的方法

Mar 21 #Javascript

jquery插件冲突(jquery.noconflict)解决方法分享

Mar 20 #Javascript

将中国标准时间转换成标准格式的代码

Mar 20 #Javascript

如何将php数组或者对象传递给javascript

Mar 20 #Javascript