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

更新时间：2007年07月21日 00:00:00 作者：

<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 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)     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脚本

JavaScript实现反转字符串的方法详解
这篇文章主要介绍了JavaScript实现反转字符串的方法,结合实例形式分析了字符串反转操作,并详细讲述了相关函数的功能与使用注意事项,需要的朋友可以参考下
2017-04-04
js实现简单登录功能的实例代码
js验证用户身份，登录成功之后等待一定秒数，跳转到操作页面。使用window函数。代码如下
2013-11-11
JavaScript实现猜数字游戏
这篇文章主要为大家详细介绍了JavaScript实现猜数字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
JavaScript常见手写题超全汇总
作为前端开发,JS是重中之重,下面这篇文章主要给大家介绍了关于JavaScript常见手写题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12
WEB开发之注册页面验证码倒计时代码的实现
近期在搞一个H5+backbone 项目,验证输入手机号验证码倒计时功能，代码中包含了前端样式布局代码和后端逻辑实现，思路明确，具有参考借鉴价值，需要的朋友参考下吧
2016-12-12
基于javascript实现浏览器滚动条快到底部时自动加载数据
这篇文章主要介绍了基于javascript实现浏览器滚动条快到底部时自动加载数据的相关资料,需要的朋友可以参考下
2015-11-11
p5.js绘制旋转的正方形
这篇文章主要为大家详细介绍了p5.js绘制旋转的正方形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
JS实现判断对象是否为空对象的5种方法
这篇文章主要介绍了JS实现判断对象是否为空对象的5种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
基于prototype扩展的JavaScript常用函数库
基于prototype扩展的JavaScript常用函数库实现代码，学习js的朋友可以参考下。
2010-11-11
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
这篇文章主要介绍了JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求的相关资料,需要的朋友可以参考下
2017-10-10