Modificación del valor CSS con JavaScript

JavaScript ofrece una forma sencilla de establecer valores CSS en línea. Sin embargo, este método puede suponer un desafío al modificar los valores CSS definidos en hojas de estilo que no están en línea.

Recuperar valores CSS de la hoja de estilo

Para recuperar valores CSS que están no en línea, JavaScript permite el acceso a hojas de estilo a través de document.styleSheets. Esta función devuelve una matriz de todas las hojas de estilo del documento. Para ubicar la hoja de estilo específica, use la propiedad document.styleSheets[styleIndex].href.

Modificación de las reglas CSS de la hoja de estilo

Una vez identificada la hoja de estilo deseada, el siguiente paso es obtener una serie de reglas CSS. Se accede a esta matriz mediante la propiedad de reglas para Internet Explorer y cssRules para la mayoría de los demás navegadores. Cada regla se puede distinguir por su propiedad selectorText.

Para modificar un valor CSS, establezca la propiedad de valor de la regla. El código actualizado sería similar a este:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

Este enfoque le permite cambiar los valores CSS globalmente, actualizando efectivamente todos los elementos con el estilo especificado.