Acceder a las hojas de estilo CSS mediante el DOM

En quirksmode.org, he visto este interesante thread, explican como acceder y manipular las hojas de estilo CSS (style sheets) de la página mediante el DOM.

Para manipular un elemento solo, utilizamos normalmente las propiedades del attributo style, utilizando:

 document.getElementById("id").style

O también asignandole una clase definida previamente:

document.getElementById("id").class = "Clase";

Pero lo interesante biene ahora…, tambien podemos acceder a las reglas de las hojas de estilo que ha cargado la página mediante:

  • document.styleSheets[n].cssRules // W3C
  • document.styleSheets[n].rules // Microsoft

…siendo n la posición de la hoja de estilos, normalmente 0.

 Obtendrás un vector (array) con todas las hojas de estilo de la página, numeradas según el orden de aparición de la hoja de estilos, y mediante los metodos y propiedades del W3C DOM-CSS podremos manipular la hoja de estilos, como se ilustra en este ejemplo.

 

 –  Change style sheet

 –  W3C DOM Compatibility – CSS

 – W3C DOM Test – CSS

 – W3C – Document Object Model CSS

 – Mozilla –  DOM styleSheet Object

 – MSDN – styleSheets Collection

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s