Esta es una pregunta muy simple, así que la mantendré muy breve:
¿Cómo puedo saber si la propiedad CSS de un elemento DOM en particular se hereda?
La razón por la que pregunto es porque con el método css de jQuery devolverá el estilo calculado, que hereda las propiedades CSS del objeto principal. ¿Hay alguna forma de recuperar las propiedades establecidas en el objeto mismo?
Un ejemplo podría explicar lo que quiero decir un poco mejor:
CSS:
div#container { color:#fff; }HTML:
<div id="container"> Something that should be interesting <div class="black"> Some other thing that should be interesting </div> </div> Entonces, en el caso de div.black , que hereda color , ¿cómo puedo saber si es heredado?
$('div.black:eq(0)').css('color') obviamente me dará #fff , pero quiero recuperar el estilo del elemento en sí , no sus padres.
Para determinar realmente si un estilo css se heredó o se configuró en el propio elemento, tendría que implementar las reglas exactas que aplican los navegadores para determinar el valor utilizado para un estilo particular en un elemento.
Tendría que implementar esta especificación que especifica cómo se calculan los valores computados y usados.
Es posible que los selectores de CSS no siempre sigan una relación padre-hijo, lo que podría haber simplificado las cosas. Considere este CSS.
body { color: red; } div + div { color: red; }y el siguiente HTML:
<body> <div>first</div> <div>second</div> </body> Tanto el first como el second aparecerán en rojo, sin embargo, el primer div es rojo porque lo hereda del padre. El segundo div es rojo porque se le aplica la regla CSS div + div , que es más específica . Mirando al padre, veríamos que tiene el mismo color, pero no es de ahí de donde lo obtiene el segundo div.
Los navegadores no exponen ninguno de los cálculos internos, excepto la interfaz getComputedStyle .
Una solución simple, pero defectuosa , sería ejecutar cada selector de las hojas de estilo y verificar si un elemento determinado satisface el selector. En caso afirmativo, suponga que el estilo se aplicó directamente en el elemento. Digamos que desea revisar cada estilo en la primera hoja de estilo,
var myElement = $('..'); var rules = document.styleSheets[0].cssRules; for(var i = 0; i < rules.length; i++) { if (myElement.is(rules[i].selectorText)) { console.log('style was directly applied to the element'); } }No creo que pueda saber si el estilo dado se hereda, creo que lo mejor que puede hacer es establecer la propiedad CSS dada en "heredar", capturar su valor calculado y compararlo con el valor original. Si son diferentes, definitivamente el estilo no se hereda.
var el = $('div.black:eq(0)'); var prop = el.css("color"); el.css("color", "inherit"); var prop2 = el.css("color"); el.css("color", prop); if(prop != prop2) alert("Color is not inherited.");El punto es este: si establece div.black en #fff en el CSS o mediante el estilo en línea, este método lo considerará heredado. No es ideal, en mi opinión, pero puede satisfacer sus necesidades. Me temo que una solución perfecta requiere recorrer toda la hoja de estilo.
La propiedad JS (no jQuery) element.style devuelve un objeto CSSStyleDeclaration así:
{parentRule: null, length: 0, cssText: "", alignContent: "", alignItems: ""… Si el estilo que le interesa tiene un valor, entonces se declara (o JS lo aplica) en el nivel del elemento; de lo contrario, se hereda.
La información provino de https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
Estaba luchando con HTML5 Dnd agregando display:list-item en el nivel de elemento (li) y rompiendo otra funcionalidad de filtro ocultar/mostrar; Pude arreglarlo de esta manera.
Mi código específico era:
// browser bug? it adds display:list-item to the moved elements, this // loops clear the explicit element-level "display" style var cols = $('#columnNames li'); for( var icol = 0; icol < cols.length; icol++) { var d = cols[icol].style; // the CSSStyleDeclaration d.display = ""; // clear the element-level style }