Modificação de valor CSS com JavaScript

JavaScript oferece uma maneira fácil de definir valores CSS embutidos. No entanto, esse método pode representar um desafio ao modificar valores CSS definidos em folhas de estilo que não estão embutidas.

Recuperando valores CSS da folha de estilo

Para recuperar valores CSS que são não inline, o JavaScript permite acesso a folhas de estilo por meio de document.styleSheets. Esta função retorna um array de todas as folhas de estilo do documento. Para localizar a folha de estilo específica, use a propriedade document.styleSheets[styleIndex].href.

Modificando regras CSS da folha de estilo

Depois que a folha de estilo desejada for identificada, a próxima etapa é obter uma série de regras CSS. Essa matriz é acessada usando a propriedade regras para o Internet Explorer e cssRules para a maioria dos outros navegadores. Cada regra pode ser distinguida por sua propriedade selectorText.

Para modificar um valor CSS, defina a propriedade value da regra. O código atualizado seria semelhante 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.

Essa abordagem permite que você altere os valores CSS globalmente, atualizando efetivamente todos os elementos com o estilo especificado.