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

这可以通过使用 parent() 在你到达 body 标签:

我设置了一个 jsfiddle 网站有一个基于你的代码的小演示。

编辑 : 抓到福吉了。在做了一些测试之后,IE7似乎会返回 'transparent' 而不是 rgba(0,0,0,0) 价值。 Here's an updated link 我在IE7、Chrome7和Firefox3.6.1.2中进行了测试。另一个警告:Chrome/Firefox将返回 rgb(255,0,0) ;返回 'red' .

#target 没有要读取的背景色,因为 background-color 不是继承的。

您可以编写一些javascript,不断爬升DOM树以搜索背景色声明,直到找到一个为止,但不能保证这会使您获得实际包含目标的元素的背景色。

顺便说一下 css() 方法获取计算样式,因此它将为您提供正确的读数。

你可以利用 window.getComputedStyle() 以获取继承的值。

警告: 必须在css或inline中手动声明继承。

#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>

粗糙的递归答案

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!");
   }

});

下面是那些讨厌浏览器不一致的人的答案。

如前所述,您需要测试这个元素是否有透明的背景,如果有,则遍历DOM,直到找到 background-color 设置-但这意味着测试每个浏览器选择返回的字符串。

Firefox、IE等返回 transparent ,Chrome/safari/webkit浏览器等返回 rgba(0, 0, 0, 0) ... 我个人也不相信,无论是现在还是将来,不会有其他的例外。

如果你不喜欢相信浏览器给你的字符串(你不应该这样做),你不必:只需测试 背景色 一个空元素。

这是一个 JSBIN 它在行动中的例子。(要在旧IE上进行测试,请从URL中删除“edit”)

用法: 将此代码链接到某个地方(它作为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();

或者如果不希望应用回退而不是“透明” 背景色 在此处或此元素后面的任何位置设置(例如,用于匹配覆盖),作为参数发送:

var backgroundColor = $('#someelement').bkgcolor('#ffffff');

这里有一个解决这个问题的优雅方法(对不起,我更喜欢咖啡脚本)。它从自我开始,但你总是可以 $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的任何页面上的控制台中运行。