Hojas de estilo y JavaScript

facebook-svg gplus-svg twitter-svg

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.