DEVENIR-WEBMASTER.COM Log In
 23
open

Modifier la feuille de style CSS avec Javascript

# Parcourir la feuille de style open

Dans l'exemple ci-dessous de manière à avoir les codes html css et javascript sous les yeux tout est placé dans le même fichier. On peut évidemment travailler sur une feuille de style placée dans un fichier séparé c'est la même chose.

Je vous conseille d'utiliser les outils webmaster et ce quelque soit le navigateur de manière à visualiser les objets du DOM CSS styleSheets et cssRules.

J'appelle DOM CSS la partie du DOM qui a été ajoutée à partir du Level 2 de la spécification du W3C. Un lien ici vers la documentation traduite en français. C'est cette partie du DOM qui interface le Javascript avec les feuilles de styles CSS.

Dans l'exemple ci-dessous on va s'attacher à parcourir les règles CSS déclarées en local.

Tester le code

# Modifier une règle de la feuille de style open

Ici on va changer la deuxième règle du tableau cssRules celle qui est donc à l'indice [1]. Il faut bien sûr être conscient que toute modification de la feuille de style peut changer l'indice du tableau où se trouve cette règle.

L'intérêt d'utiliser cette méthode réside dans le fait que la couleur de tous les paragraphes sera changée en une seule modification. Si on avait voulu utiliser l'attribut style il aurait fallu sélectionner tous les paragraphes et les parcourir dans une boucle pour modifier le style de chacun d'entre eux.

Tester le code

# Ajouter une règle à la feuille de style open

Dans l'exemple ci-dessous on insère une règle pour passer la couleur du background à black. On l'insère à l'index 0 du tableau cssRules ce qui décale les autres règles.

Tester le code

# Supprimer une règle de la feuille de style open

Dans l'exemple ci-dessous on supprime la deuxième règle celle qui est à l'index un c'est à dire celle qui colore les paragraphes en rouge.

Tester le code