得到元素真实的背景颜色的js代码

更新时间：2007年12月29日 20:18:53 作者：

这个函数来自Rico，Longbill及Dnew.cn修改。说明: 传入参数一个，为元素的id值或元素本身，返回为元素的真实背景色值（字符串）。背景值均为16进制的值（原代码是是IE里面返回的是16进制的值，而Mozilla则是rgb值，Dnew.cn将其修改为均返回16进制的值）。

<html>  <head>  <title>得到元素真实的背景颜色</title>  <style>  .classname  {background-color:#ff99dd;}  #div3  {background-color:#d8bfd8;}  div  {background-color:#87cefa;border:1px solid #333333;margin:10px;padding:4px;}  body  {background-color:#bed742;}  #div4  {background-color:transparent;}  </style>  </head>  <body>  <span style="text-align:center;font-size:20px;color:#ff7f50;width:100%;">得到元素真实的背景颜色 <font style="font-size:12px;">By <a href=http://longbill.cn target=_blank>Longbill</a></font></span>  <div id='div1'>div1 直接通过div标签定义背景色(#87cefa)</div>  <div id='div2' class=classname>div2 通过class name定义背景色(#ff99dd)</div>  <div id='div3'>div3 通过id定义背景色(#d8bfd8)</div>  <div id='div4'>div4 这是一个透明的div，背景色应为上一个元素的颜色(#bed742)</div>  <button onclick="go()">getBg()</button>  <script>  function getBg(element)  {//author: Longbill (www.longbill.cn)  //dnew.cn修补    var rgbToHex=function(rgbarray,array){        if (rgbarray.length < 3) return false;        if (rgbarray.length == 4 && rgbarray[3] == 0 && !array) return 'transparent';        var hex = [];        for (var i = 0; i < 3; i++){          var bit = (rgbarray[i] - 0).toString(16);          hex.push((bit.length == 1) ? '0' + bit : bit);        }        return array ? hex : '#' + hex.join('');      }  //---------------    if (typeof element == "string") element = document.getElementById(element);    if (!element) return;    cssProperty = "backgroundColor";    mozillaEquivalentCSS = "background-color";    if (element.currentStyle)      var actualColor = element.currentStyle[cssProperty];    else    {      var cs = document.defaultView.getComputedStyle(element, null);      var actualColor = cs.getPropertyValue(mozillaEquivalentCSS).match(/\d{1,3}/g);  //-----      actualColor = (actualColor) ? rgbToHex(actualColor) : "transparent";    }    if (actualColor == "transparent" && element.parentNode)      return arguments.callee(element.parentNode);    if (actualColor == null)      return "#ffffff";    else      return actualColor;  }  function go()  {    for(var i=1;i<=4;i++) eval("alert('div"+i+":'+getBg('div"+i+"'));");  }  </script>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

元素真实的背景颜色

uni-app微信小程序登录并使用vuex存储登录状态的思路详解
这篇文章主要介绍了uni-app微信小程序登录并使用vuex存储登录态的思路，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-11-11
IScroll5 中文API参数说明和调用方法
IScroll是移动页面上被使用的一款仿系统滚动插件。IScroll5相对于之前的IScroll4改进了许多，使得大家可以更方便的定制所需的功能了。
2016-05-05
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
这篇文章主要介绍了Bootstrap编写一个兼容IE8、谷歌等主流浏览器的受众巨幕式风格页面，感兴趣的小伙伴们可以参考一下
2016-07-07
JS实现获取word文档内容并输出显示到html页面示例
这篇文章主要介绍了JS实现获取word文档内容并输出显示到html页面,结合实例形式分析了JavaScript使用ActiveXObject组建操作word文件的相关实现技巧,需要的朋友可以参考下
2018-06-06
js动态调用css属性的小规律及实例说明
本篇文章主要介绍了js动态调用css属性的小规律及实例说明。需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
uni-app的iPhonex底部安全区域解决方案
这篇文章主要为大家介绍了uni-app的iPhonex底部安全区域解决方案示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
JavaScript观察者模式(经典)
Observer模式也叫观察者模式，是由GoF提出的23种软件设计模式的一种。Observer模式是行为模式之一，它的作用是当一个对象的状态发生变化时，能够自动通知其他关联对象，自动刷新对象状态
2015-12-12
js实现身份证号码验证的简单实例
本篇文章主要是对js实现身份证号码验证的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
js的各种排序算法实现(总结)
下面小编就为大家带来一篇js的各种排序算法实现(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JS实现利用两个队列表示一个栈的方法
这篇文章主要介绍了JS实现利用两个队列表示一个栈的方法,简单分析了使用两个队列表示一个栈的原理,并结合具体实例分析了javascript相关操作技巧,需要的朋友可以参考下
2017-12-12

得到元素真实的背景颜色的js代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具