Javascript: El DOM Style

Utilizando lo que hemos visto hasta ahora podríamos modificar el estilo de una etiqueta, cambiando el valor del atributo style por ejemplo:

Código
<p id=”texto” style=”background-color: red;”>Esto es un texto</p>
<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:

Código
//W3C
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:

Código
/*Recomendado por la W3C, los argumentos son nombre de la propiedad, valor y prioridad (por ejemplo “important”)*/
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.

Código
<script>
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:

Código
<a href=”http://mundogeek.net”>Zootropo. Diario del Mundo Geek</a>
<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).

Comentarios
  1. klaperry sin

    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

    Responder

  2. sergio

    hola q tal pues si es muy dificil esto pero tambien lo he conseguido

    Responder

  3. linchis

    Muchas gracias por la explicación. Me ha sido muy útil. Un saludo 🙂

    Responder

Deja un comentario