一个可以得到元素真实的背景颜色的javascript脚本

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

<html> 
<head> 
<title>得到元素真实的背景颜色 by Longbill</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) 
    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); 
    } 
    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需刷新才能执行]

加载全部内容