如何使用jQuery/JS检测元素的继承背景颜色？

Question

使用jQuery(或只是JavaScript),如何检测元素的继承背景颜色？

例如:

<div style="background-color: red">
    <p id="target">I'd like to know that the background-color here is red</p>
</div>

然而:

$('#target').css('background-color') == rgba(0,0,0,0)

和

$('#target').css('backgroundColor') == rgba(0,0,0,0)

我要求一般的解决方案. $('#target').parent().css('background-color')会在这种情况下工作,但不是全部.

Answer 1

这可以通过使用parent()循环直到您到达body标记来完成:

我已根据您的代码设置了一个带有一点演示的快速jsfiddle网站.

编辑:很好抓住fudgey.在进行一些测试之后,似乎IE7将返回'transparent'而不是rgba(0,0,0,0)值.这是我在IE7,Chrome 7和Firefox 3.6.1.2中测试的更新链接.这种方法的另一个警告:Chrome/Firefox将返回rgb(255,0,0); IE返回'red'.

Answer 2

您可以使用window.getComputedStyle()来获取继承的值。

警告：您必须在 css 或内联中手动声明继承。

#target{
  background-color: inherit;
}

工作示例：

#target{
  background-color: inherit;
}

let bgc = window.getComputedStyle($('#target')[0],null).getPropertyValue("background-color");
console.log(bgc);

#target{
  background-color: inherit;
}