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网站，其中包含一些演示。

修改：很好的抓住了。在进行一些测试后，似乎IE7将返回'transparent'而不是rgba(0,0,0,0)值。我在IE7，Chrome 7和Firefox 3.6.1.2中测试过Here's an updated link。使用此方法的另一个警告：Chrome / Firefox将返回rgb(255,0,0); IE返回'red'。

Answer 2

#target没有要阅读的背景色，因为background-color未被继承。

你可以编写一些不断攀爬DOM树的javascript来搜索背景颜色声明，直到它找到一个。但是不能保证这会得到实际包含你的#target的元素的背景颜色。

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

Answer 3

您可以使用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>

Answer 4

Hacky-Recursive answer

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

});

Answer 5

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

正如所解释的，你需要测试这个元素是否具有透明背景，如果是，则遍历DOM，直到找到设置了background-color的父元素 - 但这意味着测试每个浏览器选择的任何字符串返回。

Firefox，IE和其他人返回transparent，Chrome / safari / webkit浏览器等返回rgba(0, 0, 0, 0) ...我个人不相信那里不会有其他一些例外，现在或将来。

如果你不喜欢信任浏览器给你的字符串（你不应该），那么你不必：只测试一个空元素的background-color。

这是一个JSBIN实例的例子。（要在旧IE上测试，请从网址中删除“编辑”）

用法：在某处plonk此代码（它作为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');

Answer 6

这是解决这个问题的一种优雅方式（对不起，我更喜欢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

DEMO：使用coffeescript.org将其编译为javascript，并在包含jQuery的任何页面的控制台中运行它。

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

6 个答案: