使用 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')在这种情况下会起作用，但不是全部。
您可以利用window.getComputedStyle()来获取继承的值。
警告：您必须在 css 或内联中手动声明继承。
#target{
background-color: inherit;
}
工作示例：
let bgc = window.getComputedStyle($('#target')[0],null).getPropertyValue("background-color");
console.log(bgc);#target{
background-color: inherit;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color: red">
<p id="target">I'd like to know that the background-color here is red</p>
</div>#target没有背景颜色可供阅读，因为background-color不是继承的。
您可以编写一些 javascript 来不断爬上 DOM 树来搜索背景颜色声明，直到找到为止。但不能保证这会让您获得实际包含#target 的元素的背景颜色。
顺便提一句。该css()方法获取计算样式，因此它为您提供正确的阅读。
这是讨厌浏览器不一致的人的答案。
如前所述，您需要测试此元素是否具有透明背景，如果有，则遍历 DOM 直到找到具有background-colorset的父元素- 但这意味着测试每个浏览器选择返回的任何字符串。
Firefox、IE 和其他transparent浏览器返回，Chrome/safari/webkit 浏览器等返回rgba(0, 0, 0, 0)……我个人不相信现在或将来某处不会有其他例外。
如果您不喜欢信任浏览器提供给您的字符串的想法（您不应该这样做），您不必：只需针对background-color空元素的 进行测试。
这是它的一个JSBIN示例。（要在旧 IE 上进行测试，请从 URL 中删除“编辑”）
用法：在某处插入这段代码（它作为一个 jQuery 插件工作）...
(function($) {
// Get this browser's take on no fill
// Must be appended else Chrome etc return 'initial'
var $temp = $('<div style="background:none;display:none;"/>').appendTo('body');
var transparent = $temp.css('backgroundColor');
$temp.remove();
jQuery.fn.bkgcolor = function( fallback ) {
function test( $elem ) {
if ( $elem.css('backgroundColor') == transparent ) {
return !$elem.is('body') ? test( $elem.parent() ) : fallback || transparent ;
} else {
return $elem.css('backgroundColor');
}
}
return test( $(this) );
};
})(jQuery);
...然后您可以获得任何元素的“继承”背景颜色，如下所示：
var backgroundColor = $('#someelement').bkgcolor();
或者，如果您希望background-color在此处或此元素后面的任何位置设置no 时应用回退而不是“透明” （例如，用于匹配叠加层），请作为参数发送：
var backgroundColor = $('#someelement').bkgcolor('#ffffff');
哈克递归答案
jQuery.fn.InheritedBackgroundColor = function(){
jQuery(this).parents().each( function(){
var bc = jQuery(this).css("background-color");
if( bc == "transparent" ){
return jQuery(this).InheritedBackgroundColor();
}
else{
return bc;
}
});
}
$(document).ready(function(){
if( $("#target").InheritedBackgroundColor() == rbga(255,0,0,0) ){
alert("Win!");
}
else{
alert("FAIL!");
}
});