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

 更新时间:2014年03月21日 16:25:56   作者:  
这篇文章主要介绍了js获得网页背景色和字体色的方法,需要的朋友可以参考下
获得网页的背景色和字体颜色,方法如下:

思想: 通过取得颜色属性值得到的是 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>

相关文章

  • JavaScript中string对象

    JavaScript中string对象

    和JAVA中String对象用处一样啊,javascript中的String对象也有自己的方法,和JAVA中的类似。
    2015-06-06
  • Javascript 中文字符串处理额外注意事项

    Javascript 中文字符串处理额外注意事项

    javascript文件中的字符常量与所在的js文件字符编码密切相关,如下一段代码
    2009-11-11
  • 浅析JS动态创建元素【两种方法】

    浅析JS动态创建元素【两种方法】

    下面小编就为大家带来一篇浅析JS动态创建元素【两种方法】。小编觉得挺不错的,现在分享给大家。一起跟随小编过来看看吧
    2016-04-04
  • js验证上传图片的方法

    js验证上传图片的方法

    这篇文章主要介绍了js验证上传图片的方法,可对上传图片的类型、大小等进行限制,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • nullJavascript中创建对象的五种方法实例

    nullJavascript中创建对象的五种方法实例

    今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘。目前又不当COO,还是得用心记代码哦!
    2013-05-05
  • JavaScript中Null与Undefined的区别解析

    JavaScript中Null与Undefined的区别解析

    这篇文章主要介绍了JavaScript中Null与Undefined的区别解析,本文给出了多个代码实例讲解它们之间的区别,需要的朋友可以参考下
    2015-06-06
  • javascript设计简单的秒表计时器

    javascript设计简单的秒表计时器

    这篇文章主要介绍了javascript设计简单的秒表计时器,该秒表将包括两个按钮和一个用于显示时间的文本框,当单击开始按钮时开始计时,最小单位为0.01秒,此时再次单击按钮则停止计时,文本框显示经过的时间,需要的朋友可以参考下
    2015-11-11
  • AngularJs 禁止模板缓存的方法

    AngularJs 禁止模板缓存的方法

    本篇文章主要介绍了AngularJs 禁止模板缓存的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JavaScript Length 属性的总结

    JavaScript Length 属性的总结

    javascript length属性是返回字符串的字符数目,length可以返回function的参数数目。接下来,通过本篇文章给大家介绍javascript length属性,对javascript length属性感兴趣的朋友可以参考下本篇文章
    2015-11-11
  • 微信小程序的动画效果详解

    微信小程序的动画效果详解

    本文主要介绍了微信小程序动画效果的实现方法与原理解析。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论