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 estilos.
Sé que esta es una pregunta antigua, sin embargo, pensé en compartir lo que hice con la respuesta de Josh, a saber: lo modifiqué para eliminar el css si se heredó y lo convertí en un complemento de jQuery. Siéntase libre de derribarlo, pero hasta ahora me está funcionando :-)
$.fn.isInheritedStyle = function(style) { var current = this.css(style); this.css(style, 'inherit'); var inherited = this.css(style); if (current == inherited) this.css(style, ''); else this.css(style, current); return (current == inherited); }