¿Cómo puedo detectar el color de fondo heredado de un elemento usando jQuery/JS?

Question

Usando jQuery (o solo JavaScript), ¿cómo detecto el color de fondo heredado de un elemento?

Por ejemplo:

<div style="background-color: red"> 
    <p id="target">I'd like to know that the background-color here is red</p> 
</div> 

Sin embargo:

$('#target').css('background-color') == rgba(0,0,0,0) 

y

$('#target').css('backgroundColor') == rgba(0,0,0,0) 

estoy pidiendo una solución general. $('#target').parent().css('background-color') funcionaría en esta instancia, pero no en todas.

Answer 1

Esto podría lograrse mediante el uso de la parent() en un bucle hasta que llegue a la body etiqueta:

He creado un sitio jsfiddle rápida con un poco de demostración basado en su código.

Editar: Good catch fudgey. Después de hacer algunas pruebas, parece que IE7 devolverá 'transparent' en lugar del valor rgba(0,0,0,0). Here's an updated link que probé en IE7, Chrome 7 y Firefox 3.6.1.2. Otra advertencia con este enfoque: Chrome/Firefox devolverá rgb(255,0,0); IE devolvió 'red'.

Answer 2

#target no tiene color de fondo para leer porque background-color no se hereda.

puede escribir un javascript que siga trepando por el árbol DOM para buscar una declaración de color de fondo hasta que encuentre una., Pero no hay garantía de que obtendrá el color de fondo de un elemento que realmente contiene su # objetivo.

btw. el método css() obtiene estilos computados, por lo que le da la lectura correcta.

Answer 3

Hacky-recursiva respuesta

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 4

Aquí está la respuesta para las personas que odian inconsistencia navegador.

Como se explicó, debe probar si este elemento tiene un fondo transparente, y si lo hace, recorrer el DOM hasta que encuentre un elemento primario con background-color establecido, pero eso significa probar cualquier cadena que cada navegador elija devolver.

Firefox, IE y otros regresan navegadores transparent, Chrome/Safari/WebKit etc vuelven rgba(0, 0, 0, 0) ... y yo personalmente no confían en que no habrá alguna otra excepción en alguna parte, ahora o en el futuro.

Si no le gusta la idea de confiar en una cadena proporcionada por un navegador (y no debe), no tiene que: solo probar contra el background-color de un elemento vacío.

Aquí hay un ejemplo de JSBIN en acción.(Para probar el viejo IE, retire 'Edit' en la URL)

---

Uso: Plonk este código en algún lugar (que funciona como un plugin de 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); 

... entonces se puede obtener el color de fondo 'heredada' de cualquier elemento de la siguiente manera:

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

O si desea una alternativa, que se aplica en lugar de 'transparente' si no se establece background-color h ere o en cualquier lugar detrás de este elemento (p. para hacer coincidir superposiciones), enviar como un argumento:

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

Answer 5

Aquí está una manera elegante de resolver este problema (lo siento, prefiero CoffeeScript). Comienza desde uno mismo, pero siempre puedes usar $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: Uso coffeescript.org para compilar esta a javascript y ejecutar esto en una consola en cualquier página que tiene jQuery incluido.

Answer 6

Puede hacer uso de window.getComputedStyle() para obtener el valor heredado.

Advertencia: Debe declarar manualmente la herencia en css o en línea.

#target{ 
    background-color: inherit; 
} 

Ejemplo de trabajo:

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>