Utilizando lo que hemos visto hasta ahora podríamos modificar el estilo de una etiqueta, cambiando el valor del atributo style por ejemplo:
<input type=»button» value=»Pulsame» onclick=»getElementById(‘texto’).style = ‘background-color: red;'» />
Pero en DOM Nivel 2 se nos da la posibilidad de modificar el estilo del documento incluso cuando el estilo no está definido como un atributo de la etiqueta correspondiente, sino como una serie de reglas en el head del documento o en un archivo css aparte. Para ello nos valemos de la matriz styleSheets, una propiedad del objeto document, en la que cada posición de la matriz alberga un objeto que representa una hoja de estilo. Cada uno de estos objetos tiene una matriz de las reglas de la hoja de estilo, de nombre cssRules en el estándar de la W3C y rules en IE. De forma que para acceder por ejemplo a la tercera regla de la primera hoja de estilo se utilizaría:
miRegla = document.styleSheets[0].cssRules[2];
//IE
miRegla = document.styleSheets[0].rules[2];
Como ya vimos, cada una de las propiedades de estilo de cada regla se representan como propiedades del objeto style, propiedad a su vez del objeto que representa la regla. Para cambiar el color de fondo de los enlaces de la página, por ejemplo, usaríamos:
miRegla.style.setProperty(‘background-color’,’red’,null);
//Otra forma
miRegla.style.color = ‘red’;
Y para obtener el contenido de la regla podríamos usar las propiedades de style selectorText, una cadena que representa al selector y cssText, una cadena que representa el contenido de la regla.
regla = document.styleSheets[0].cssRules[0].style;
alert(«El contenido de la regla para la etiqueta A es » + regla.cssText);
</script>
<a href=»http://mundogeek.net»>Zootropo. Diario del Mundo Geek</a>
<input type=»button» value=»Pulsame» onclick=»document.styleSheets[0].cssRules[0].style.setProperty(‘background-color’,’red’,null);» />
Por último además de consultar y modificar reglas ya existentes, podemos crear y eliminar reglas mediante los métodos insertRule(regla, posicion) y deleteRule(posicion) perteneciente a cada uno de los objetos de la matriz styleSheets:
<input type=»button» value=»Añadir regla» onclick=»document.styleSheets[0].insertRule(‘a {color:red;}’,0);»>
<input type=»button» value=»Eliminar regla» onclick=»document.styleSheets[0].deleteRule(0);»>
Hay que tener en cuenta también que IE tiene un par de métodos propietarios que cumplen exactamente la misma función, addRule(regla) y removeRule(posicion).
man si que me ha costado aprender esto del style sheet pero al fin lo consegui XD ademas de tu gran aporte existe esta pagina donde podremos ver una lista para desarrollar aplicaciones con este dom style
http://www.quirksmode.org/dom/w3c_css.html
solo me queda agradecer
hola q tal pues si es muy dificil esto pero tambien lo he conseguido
Muchas gracias por la explicación. Me ha sido muy útil. Un saludo 🙂