Cómo analizo @import stylesheets con Javascript

Question

Estoy tratando de leer selectores de CSS en mis hojas de estilo con la matriz document.styleSheets. Funciona bien con las etiquetas <link> y <style>, pero cuando utilizo @import dentro de <style>, no aparece en la matriz, solo como cssRule (el estilo es "Indefinido" en Safari 3 y FF 3).

Entonces: ¿Cómo puedo analizar el css en un archivo @imported?

Answer 1

Suponiendo que nuestro documento contiene un @ de importación en reglas como primera regla en la primera hoja de estilo, aquí está el código para los estándares de los navegadores compatibles

document.styleSheets[0].cssRules[0].styleSheet.cssRules; 

y el caso especial para nuestro todo-amada IE

document.styleSheets[0].imports[0].rules; 

Podría haberlo deducido fácilmente si hubiera leído the page at quirksmode.org al que ya había vinculado y luego caminó las propiedades de la @import -rule con un lazo for..in - eso es lo que hice ... .

PS: que no puedo comentar sobre otras respuestas, pero si pudiera, yo os lo hubiera ridiculizado adecuadamente;)

Answer 2

Comprobar esta página - que además enlaces a éste en quirksmode .org.

Gracias, pero lo he intentado ... los ejemplos de Quirksmode nunca analizan las hojas de estilo incrustadas con @import.

Si tengo este código HTML/CSS:

<link rel="stylesheet" type="text/css" href="css/test1.css" /> 

<style type="text/css"> 

    @import url('css/test2.css'); 

    div { 
     color: blue; 
    } 

</style> 

... entonces document.styleSheets.length es 2 (la etiqueta de enlace y la etiqueta de estilo). El archivo CSS que está vinculado a través de @import estará disponible como

document.styleSheets[1].cssRules[0]. 

En otras palabras, una regla CSS. Esto también se puede ver en la página Quirksmode que mencionaste, Christoph. Puedo obtener su cssText ("@import url ('css/test2.css');") pero no puedo descifrar cómo analizar el CSS dentro del archivo (test2.css) ...

If he perdido totalmente algo obvio aquí, no dude en ridiculizar ... :)

Answer 3

excelente página con un montón de hojas de estilo de análisis de información: http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets