使用 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') 可以在这种情况下使用，但不是全部。
【问题讨论】：
标签： javascript jquery html css
这可以通过在循环中使用parent() 来完成，直到到达body 标记：
我已经根据您的代码建立了一个快速的jsfiddle 站点，并带有一个小演示。
编辑：
好抓软糖。经过一些测试后，IE7 似乎将返回 'transparent' 而不是 rgba(0,0,0,0) 值。 Here's an updated link 我在 IE7、Chrome 7 和 Firefox 3.6.1.2 中测试过。这种方法的另一个警告：Chrome/Firefox 将返回 rgb(255,0,0)； IE 返回了'red'。
【讨论】：
color !== 'transparent' - 然后我收到 rgb(255, 0, 0) 警报 - 更新演示：jsfiddle.net/Mottie/Y4uDL/1
您可以使用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-color 的父级 - 但这意味着测试每个浏览器选择返回的任何字符串。
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（例如，用于匹配覆盖），请作为参数发送：
var backgroundColor = $('#someelement').bkgcolor('#ffffff');
【讨论】：
Hacky-递归答案
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!");
}
});
【讨论】：
这是解决此问题的一种优雅方法（抱歉，我更喜欢 CoffeeScript）。它从自我开始，但您始终可以使用$el.parents().each ->。
findClosestBackgroundColor = ($el) ->
background = 'white'
$.merge($el, $el.parents()).each ->
bg = $(this).css('background-color')
if bg isnt 'transparent' and !/rgba/.test(bg)
background = bg
return false
background
演示：使用coffeescript.org将其编译为javascript，并在包含jQuery的任何页面上的控制台中运行。
【讨论】：