比如<div id="test" style="background-color:red;"></div>
这样的元素很容易得到他的背景色,对于
<table style="background-color:red;">
<tr>
...
</tr>
</table>
这样的级联性质的元素,想获得tr
的背景色该怎么做呢?window.computedStyle
么?可是有时候不起作用啊
比如<div id="test" style="background-color:red;"></div>
这样的元素很容易得到他的背景色,对于
<table style="background-color:red;">
<tr>
...
</tr>
</table>
这样的级联性质的元素,想获得tr
的背景色该怎么做呢?window.computedStyle
么?可是有时候不起作用啊
function getBackgroundColor($dom) {
var bgColor = "";
while($dom[0].tagName.toLowerCase() != "html") {
bgColor = $dom.css("background-color");
if(bgColor != "rgba(0, 0, 0, 0)" && bgColor != "transparent") {
break;
}
$dom = $dom.parent();
}
return bgColor;
}
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
如果上层元素的背景色也算作本元素的背景色,那么需要从目标元素开始逐层检查自身背景色,如没有则检查其上层元素。
以题主的table代码为栗子,先检查tr,如果有设置背景色则输出。如果没有则检查其父元素tbody(注:在特定的浏览器和页面DTD下,有可能会在table和tr之间自动补一个tbody),再没有则检查table。
大概就是这样。
对于style属性而言,获取器背景色属性比较容易。但是如果是在css文件和style标签中设置的背景色,则需要使用题目评论中 @Humphry 大大介绍的getComputedStyle来进行检查操作。
另外,如果返回值为“
transparent
”,或者是一个rgba值,如rgba(1,2,3,0)
(其四号位alpha值为0时,不管前三个rgb值是啥都等同于透明),都可以认定为无背景色……