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

时间:2020-05-12 人气:0

<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>div1 直接通过div标签定义背景色(#87cefa)</div>  
<div>div2 通过class name定义背景色(#ff99dd)</div>  
<div>div3 通过id定义背景色(#d8bfd8)</div>  
<div>div4 这是一个透明的div，背景色应为上一个元素的颜色(#bed742)</div>  
<button onclick="go()">getBg()</button>  
<script>  
function getBg(element)  
{//author: Longbill (www.longbill.cn)  
/https://img.qb5200.com/download-x/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需刷新才能执行]

加载全部内容