Как определить унаследованный фоновый цвет элемента с помощью jQuery/JS?

Ответ 1

Это может быть достигнуто с помощью parent() в цикле, пока вы не достигнете тега body:

Я установил быстрый jsfiddle сайт с небольшой демонстрацией на основе вашего кода.

Edit: Хорошая уловка. После некоторого тестирования кажется, что IE7 вернет 'transparent' вместо значения rgba(0,0,0,0). Здесь обновленная ссылка, которую я тестировал в IE7, Chrome 7 и Firefox 3.6.1.2. Еще одно предостережение с таким подходом: Chrome/Firefox вернет rgb(255,0,0); IE вернул 'red'.

Ответ 2

#target не имеет цвета фона для чтения, поскольку background-color не наследуется.

вы можете написать javascript, который продолжает подниматься по дереву DOM, чтобы искать объявление фона-цвета, пока оно не найдет его., но нет гарантии, что это даст вам цвет фона элемента, который фактически содержит ваш #target,

кстати. метод css() получает вычисленные стили, поэтому он дает вам правильное значение.

Ответ 3

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

});

Ответ 4

Вот ответ для людей, которые ненавидят непоследовательность браузера.

Как объяснялось, вам нужно проверить, имеет ли этот элемент прозрачный фон, а затем, если это так, пройдите через DOM, пока не найдете родителя с background-color set - но это означает тестирование любой строки, которую каждый браузер хочет вернуть.

Firefox, IE и другие возвращают transparent, браузеры Chrome/Safari/webkit и т.д. return rgba(0, 0, 0, 0)... и я лично не верю, что там не будет какого-то другого исключения где-то, сейчас или в будущее.

Если вам не нравится идея доверять строке, предоставленной вам браузером (и вам не следует), вам не нужно: просто протестировать с background-color пустого элемента.

Здесь JSBIN пример этого в действии. (чтобы проверить старый IE, удалите 'edit' из URL-адреса)

Использование: Plonk этот код где-нибудь (он работает как плагин jQuery)...

(function($) {
  // Get this browser 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');

Ответ 5

Вы можете использовать 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>

Ответ 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.