页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容元素真实的背景颜色

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

发布：dxy 字体：[增加减小] 类型：转载

这个函数来自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 全选提示:你可先修改部分代码,再按运行]

Tags：元素真实的背景颜色