当前位置：Gxlcms > JavaScript > 一个可以得到元素真实的背景颜色的javascript脚本

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

时间：2021-07-01 10:21:17 帮助过：9人阅读

<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 Longbill</font></span> 
div1 直接通过div标签定义背景色(#87cefa) 
div2 通过class name定义背景色(#ff99dd) 
div3 通过id定义背景色(#d8bfd8) 
div4 这是一个透明的div，背景色应为上一个元素的颜色(#bed742) 
<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需刷新才能执行]

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

人气教程排行