Hojas de estilo y JavaScript
Crear una nueva hoja de estilo
Podemos crear una nueva hoja de estilo exactamente como creamos cualquier otro elemento HTML utilizando javascript:
// crea una nueva hoja de estilo var nuevoCSS = document.createElement("style"); // establece el valor del atributo media del nuevo elemento creado nuevoCSS.setAttribute("media", "screen"); // añade la nueva hoja de estilo al final del <head> document.head.appendChild(nuevoCSS);
Las hojas de estilo de un documento
La propiedad document.styleSheets
devuelve la lista de las hojas de estilo <style>
vinculadas o incrustadas en un documento.
var hojasDeEstilo = document.styleSheets;
Por ejemplo si queremos recuperar la información acerca de la primera hoja de estilo podemos escribir:
console.log(hojasDeEstilo[0]);//devuelve la primera hoja de estilos
Exactamente como dentro de un array la primera hoja tiene el índex cero. El resultado de esto es algo así:
CSSStyleSheet
cssRules:CSSRuleList
0:CSSStyleRule
1:CSSStyleRule
2:CSSStyleRule
length:3
__proto__:CSSRuleList
disabled:false
href:null
media:MediaList
ownerNode:null
ownerRule:null
parentStyleSheet:null
rules:CSSRuleList
title:null
type:"text/css"
Donde la primera propiedad ( cssRules
) contiene un objeto ( CSSRuleList
) con todas las reglas de la hoja de estilo.
Si se trata de una hoja externa, el objeto CSSRuleList
es un objeto vacío.
Si se trata de una hoja de estilo incrustada, podemos recuperar todas estas reglas o una regla en particular. Por ejemplo para recuperar la tercera regla de la primera hoja de estilo podemos escribir:
// recupera la 3a regla de la 1a hoja de estilo console.log(hojasDeEstilo[0].cssRules[2]);
Añadir una nueva regla
Para añadir una nueva regla utilizamos el método insertRule
:
nuevoCSS.insertRule("div { border: 5px solid red; border-radius:50%; }", 1);
La sentencia de arriba inserta una nueva regla CSS en la posición índex 1 ( la segunda regla CSS ) desplazando las siguientes reglas hacia abajo. Por defecto (si no especificamos el último parámetro, o sea el índex) insertRule
inserta una nueva regla CSS en la posición índex 0 ( la primera posición ). Si queremos insertar una nueva regla al final de la hoja:
nuevoCSS.insertRule("div { background-color: green; }", nuevoCSS.cssRules.length);
El método insertRule
devuelve la posición de la nueva regla en la hoja de estilo, y esto puede ser útil si insertamos reglas CSS de manera dinámica.
Soporte
El método insertRule
es soportado en todos los navegadores modernos. Sin embargo si necesita soporte para IE8 y más antiguos tendrá que utilizar también el método addRule
addRule('pre', 'font: 14px verdana');
Borrar una regla
Podemos fácilmente borrar una regla si sabemos la posición de esta en la hoja de estilos
nuevoCSS.deleteRule(4);
Soporte
Exactamente como en el caso de insertRule
, el método deleteRule
es soportado en todos los navegadores modernos. Sin embargo si necesita soporte para IE8 y más antiguos tendrá que utilizar removeRule
(index)
Otras maneras de manipular el CSS via JavaScript
También podemos reemplazar todo el contenido de una hoja de estilo utilizando la propiedad textContent
que lee o escribe el contenido textual de un nodo.
hojaDeEstilo.textContent = cadenaDeTextoCSS
Donde cadenaDeTextoCSS
es una variable, de hecho una cadena de texto donde hemos escrito las reglas CSS que deseamos utilizar.