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

来源：视递美食网

<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> 
得到元素真实的背景颜色 <font style="font-size:12px;">By Longbill</font> 
div1 直接通过div标签定义背景色(#87cefa) 
div2 通过class name定义背景色(#ff99dd) 
div3 通过id定义背景色(#d8bfd8) 
div4 这是一个透明的div，背景色应为上一个元素的颜色(#bed742) 
<button onclick="go()">getBg()</button> 
 
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需刷新才能执行]

显示全文

全部频道

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