¿Es posible encontrar reglas CSS desde un nodo HTML a través de JavaScript?

Quiero obtener un elemento en el DOM y luego buscar qué reglas en mis archivos CSS están contribuyendo a su apariencia. Similar a lo que hace firebug o webkits inspector. ¿Hay alguna manera de hacer esto en JavaScript?¿Es posible encontrar reglas CSS desde un nodo HTML a través de JavaScript?

Actualización:

I deberán proporcionar una restricción y un ejemplo específico - Sólo estoy interesado en la realización de esto en los navegadores basados en webkit así las dificultades entre navegadores no son tanto un problema. Lo que estoy tratando específicamente de lograr es esto. Digamos que tengo una hoja de estilo de la siguiente manera:

 div { 
     background: #f0f0f0; 
    } 

    .example { 
     padding: 10px; 
    }

Y entonces digamos algo de código HTML siguiente manera:

<div id="test" class="example"> 
    <hgroup> 
     <h1>Test</h1> 
     <h2>A sample file to play with.</h2> 
    </hgroup> 
    <ul class="sample"> 
     <li id="item_1">Item 1</li> 
     <li id="item_2">Item 2</li> 
    </ul> 
    </div>

Así que en javascript Quiero ser capaz de tener una función que puede encontrar el selectores de la CSS que son el estilo del objeto:

get_selectors_for(document.getElementById('test')) 
// should return: 
// ['div','.example']

¿Qué tan complicado es que para revertir los selectores de consulta sabiendo que sólo tenemos que preocuparnos de WebKit en lugar de todos los navegadores?

Fuente

2010-12-19 Jim Jeffers

Debo mencionar que solo estoy interesado en hacer esto en el kit web. No tanto navegador cruzado. –

posible duplicado de [Buscar todas las reglas CSS que se aplican a un elemento] (http://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element) – Bergi

T el es lo que quieres Solo WebKit. Descubrí getMatchedCSSRules mirando la fuente del inspector web de cromo.

function getAppliedSelectors(node) { 
    var selectors = []; 
    var rules = node.ownerDocument.defaultView.getMatchedCSSRules(node, ''); 

    var i = rules.length; 
    while (i--) { 
     selectors.push(rules[i].selectorText); 
    } 
    return selectors; 
    }

Fuente

2010-12-19 13:18:09 Hemlock

Awesome! Eso es exactamente lo que estaba buscando. –

Tenga en cuenta que esto solo funciona para las reglas dentro de las hojas de estilo enviadas desde el mismo servidor que el HTML. Esto es por diseño – Jake

@Jake Es por eso que obtengo 'nulo' – jscripter

¿Es posible? Absolutamente ... ¿es simple (especialmente navegador cruzado con IE en la mezcla), no tanto. Si realmente está interesado en hacer esto, check out the Firebug Lite CSS source here. Al menos los métodos están decentemente comentados mostrando qué información está obteniendo cada uno.

.... o si simplemente desea inspeccionar en un navegador que no tiene un inspector, just use Firebug Lite.

Fuente

2010-12-19 10:01:57

Gracias Nick, Realmente solo estoy interesado en hacer esto en el webkit. Debería haber sido más específico, pero ahora estoy contento de haberlo dejado un poco amplio. –

Hay una manera confiable de hacer las cosas, que se menciona en este blog post:

function getStyle(oElm, strCssRule){ 
    var strValue = ""; 
    if(document.defaultView && document.defaultView.getComputedStyle){ 
     strValue = document.defaultView 
      .getComputedStyle(oElm, "").getPropertyValue(strCssRule); 
    } 
    else if(oElm.currentStyle){ 
     strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ 
      return p1.toUpperCase(); 
     }); 
     strValue = oElm.currentStyle[strCssRule]; 
    } 
    return strValue; 
}

Si está usando Firefox y Firebug, puede intentar ejecutar este código en stackoverflow, para ver lo que se obtiene:

document.defaultView.getComputedStyle(document.getElementById("custom-header"),"")

y con IE y Firebug Lite, se puede hacer:

document.getElementById("custom-header").currentStyle

Fuente

2010-12-19 10:03:35

Gracias, pero creo que esto busca un estilo calculado del CSS. Entonces este código me ayudaría a descubrir que el tamaño de fuente es 10px ;. No creo que necesariamente esté destinado a encontrar los selectores específicos en el CSS ¿verdad? –

Este código lo ayudaría a encontrar las reglas CSS aplicadas a un elemento. No importa dónde se originan, sino el hecho de que se aplican. –

¡agrega un comentario cuando bajas tu voto, por favor! –

Bueno, es un tema viejo. Bueno para Webkit por ofrecer una solución. Según lo sugerido, he investigado firebug-lite y ... ¡sorpresa! Para cada nodo, pasa por encima de cada regla en cada hoja de estilo comprobando si el selector coincide con nuestros nodos o no.

Fuente

2011-01-15 17:29:30 vitko

Una solución multi-navegador que he tenido buen éxito con es http://www.brothercake.com/site/resources/scripts/cssutilities/

Es muy potente y preciso, se deriva mucha más información que la función de webkit sólo se mencionó anteriormente, y funciona en todos los estilos (incluidos los que se realizan a través del sitio y que no están activos o han sido anulados).

Fuente

2012-09-07 13:21:45 GunnerGuyven

¿Es posible encontrar reglas CSS desde un nodo HTML a través de JavaScript?

Respuesta

Cuestiones relacionadas