link W3C open

Modifier la feuille de style CSS avec Javascript

#1 Pourquoi modifier la feuille de style ? open

On a vu dans le tuto précédent que l'on pouvait modifier l'attribut style d'un élément. Mais cette méthode nous limite à l'élément. Bien sûr on peut faire une boucle sur un tableau d'éléments mais si il y en a beaucoup ce sera peut être plus efficace de passer par une modification de la feuille de style.

#2 Accéder à la table des feuilles de style avec styleSheets open

Ci-dessous on fait des exemples où l'on place les codes html, css et javascript dans le même fichier de manière à avoir tout sous les yeux. On peut évidemment travailler sur une feuille de style placée dans un fichier séparé et c'est la même chose pour le Javascript.

On va se servir de ce morceau de code pour accéder à la console et voir ce qui est à notre disposition pour manipuler la feuille de style.

Tester le code

1) Accédez à la table des feuilles de style avec la propriété stylesSheets.

La table des feuilles de style

2) Développez la propriété 0. Vous voyez que vous pouvez accéder à votre feuille de style avec stylesSheets[0].

Notre feuille de style

3) Développez le __proto__. Vous voyez les méthodes pour manipuler les règles.

Les méthodes pour manipuler les règles dans le proto

#3 Accéder à la table des règles avec cssRules open

4) Développez cssRules. Vous voyez que vous pouvez accéder à la première règle avec stylesSheets[0].cssRules[0] et à la deuxième avec stylesSheets[0].cssRules[1].

La table des règles

5) Développez la propriété 1. Vous pouvez voir les propriétés cssText, selectorText et style. Vous pouvez utiliser les deux premières pour retrouver votre règle dans la feuille de style. On va le voir. Et la troisième style vous permet d'accéder à toutes les propriétés CSS de votre règle.

Une règle particulière

6) Développez la propriété style pour voir apparaître toutes les propriétés CSS auxquelles vous avez accès. La liste est très longue et vous ne voyez pas tout sur l'image ci-dessous.

Les style d'une règle particulière

Je récapitule. On accède :

  1. D'abord à la table des feuilles de styles document.styleSheets.
  2. Puis à notre feuille de style document.styleSheets[0].
  3. Puis à la table des règles de notre feuille de style document.styleSheets[0].cssRules.
  4. Puis à une règle particulière document.styleSheets[0].cssRules[1].
  5. Et enfin à la propriété style de cette règle document.styleSheets[0].cssRules[1].style.

#4 Parcourir une feuille de style open

Attention tout de même. Accéder à une règle d'une feuille de style au moyen d'un indice en dur est dangereux puisqu'il suffirait qu'une règle CSS soit ajoutée devant pour que le code Javascript ne trouve plus la règle et soit en échec.

Pour éviter ça vous pouvez faire un parcours de la table des règles et utiliser cssText de manière à retrouver l'indice de la règle. Vous avez un exemple ci-dessous. Vous pourriez aussi utiliser selectorText selon la situation.

Tester le code

#5 Modifier une règle open

Ici on va changer la deuxième règle du tableau cssRules celle qui est donc à l'indice [1].

Je vais :

  1. Modifier une propriété existante du bloc de déclaration de la règle CSS.
  2. Ajouter une valeur à une propriété de ce même bloc.
Tester le code

#6 Insérer une règle open

Dans l'exemple ci-dessous on insère une règle pour passer la couleur du background à black. On se sert d'un deuxième paramètre au moment de l'appel à insertRule() pour insérer à la fin du tableau cssRules. De cette manière on ne décale pas les autres règles.

Tester le code

#7 Supprimer une règle open

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

Tester le code