Creación dinámica de hojas de estilo

Muchas veces necesitamos crear hojas de estilo según las circunstancias que se nos presentan. Conocemos como alterar el estilo de un elemento, pero ¿cómo debemos crear una clase de estilo para poder aplicarlo a varios elementos?

Con el siguiente código es posible crear una hoja de estilos y agregarla a la sección HEAD del docuemnto.

var cssNode = document.createElement('style');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.media = 'screen';
cssNode.title = 'dynamicSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);

Luego, mediante el uso del método addRule (IE) o insertRule (Firefox), se pueden ir agregando las reglas

var cssObj
for(var i=0; i < document.styleSheets.length; i++) {
   if(document.styleSheets[i].title == 'dynamicSheet')
   {
      cssObj = document.styleSheets[i]
      break
   }
}
if(cssObj.addRule) // IE
{
   cssObj.addRule('.myClass', 'color:red', 0)
}else{   // Firefox
   cssObj.insertRule('.myClass {color:red}', 0)
}

Tener en cuenta las siguientes diferencias de propiedades y métodos según el navegador:


Métodos
addRule(selector, regla, [índice])
IE
Agrega una regla. Por omisión del índice las reglas son agregadas al final de la hoja de estilos, pero puede especificarse el índice (comenzando con cero) 
document.styleSheets[0].addRule(".demoClass", "background-color: blue")

insertRule(regla, indice)
FireFox
Es similar al anterior pero la regla se genera en un sólo parámetro ''String''
document.styleSheets[0].addRule("demoClass {background-color: blue}")
removeRule([index])
IE
Esto removerá la primera regla de la hoja de estilo si no se especifica el índice.
deleteRule(index)
FireFox
Esto es similara a IE, removerá la regla en el índice solicitado.



Propiedades
cssRules[]
FireFox
Una tabla conteniendo las reglas de la hoja de estilo actual
rules[]
IE
Una tabla conteniendo las reglas de la hoja de estilo actual
disabled
Ambos
Verdadero si la hoja de estilo esta inhabilitada, falso si esta habilitada
href
Ambos
URL de la actual hoja de estilo.
imports[]
IE
Una tabla de todas las reglas importadas a través de ''@import''
length
Ambos
Número de hojas de estilo en el objeto
media
Ambos
Medio a la que esta orientada esta hoja de estilo
ownerNode
FireFox
Retorna el objeto del DOM padre de este objeto, generalmente ''link'' o ''style''.
owningElement
IE
Retorna el objeto del DOM padre de este objeto, generalmente ''link'' o ''style''.
ownerRule
FireFox
Si esta hoja de estilo fue agregada via ''@import'', esto apunta al objeto padre.

parentStyleSheet
Ambos
Si esta hoja de estilos es producto de un ''@page'' o ''@import'', esta propiedad referencia a la hoja de estilo padre.
title
Ambos
Título definido para la etiqueta ''style'' o ''link'.
type
Ambos
Tipo de la hoja de estilo, usualmente ''(text/css)''.