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

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.Еще одна оговорка с этим подходом: Chrome / Firefox вернет rgb(255,0,0);IE вернул 'red'.

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

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

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

Вот пример JSBIN в действии. (чтобы проверить старый IE, удалите «edit» из 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');

Answer 5

хаки-рекурсивный ответ

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