Modification des valeurs CSS avec JavaScript

JavaScript offre un moyen simple de définir des valeurs CSS en ligne. Cependant, cette méthode peut poser un défi lors de la modification des valeurs CSS définies dans des feuilles de style qui ne sont pas en ligne.

Récupération des valeurs CSS de la feuille de style

Pour récupérer les valeurs CSS qui sont pas en ligne, JavaScript permet d'accéder aux feuilles de style via document.styleSheets. Cette fonction renvoie un tableau de toutes les feuilles de style du document. Pour localiser la feuille de style spécifique, utilisez la propriété document.styleSheets[styleIndex].href.

Modification des règles CSS de la feuille de style

Une fois la feuille de style souhaitée identifiée, l'étape suivante consiste à obtenir un tableau de règles CSS. Ce tableau est accessible à l'aide de la propriété Rules pour Internet Explorer et de cssRules pour la plupart des autres navigateurs. Chaque règle peut être distinguée par sa propriété selectorText.

Pour modifier une valeur CSS, définissez la propriété value de la règle. Le code mis à jour ressemblerait à ceci :

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.

Cette approche vous permet de modifier les valeurs CSS globalement, mettant efficacement à jour tous les éléments avec le style spécifié.