close

Modifier les classes en JavaScript

#1 La propriété className open

La propriété className contient la liste des classes qui sont positionnées sur un élément HTML. Il faut remarquer que c'est className et non pas class qui a été choisi. Donc, le nom de la propriété JavaScript n'est pas le même, que celui de l'attribut HTML. Et cela vient du fait que class est un mot réservé du langage JavaScript (utilisé pour la déclaration des objets en JavaScript version 6).

Le petit inconvénient de className, c'est que c'est une chaîne de caractères, et que pour ajouter ou supprimer une classe, il faut manipuler cette chaîne. Ce n'est pas très compliqué. Le plus souvent, on éclate la chaîne dans un tableau avec un split et ensuite, on travaille sur le tableau. Mais cela nous amène à produire du code de manière répétitive, car on retrouve ce besoin dans tous les projets. La propriété classList que l'on va voir juste après corrige ce petit souci.

L'ordre, dans lequel sont placées les classes, dans la chaîne de caractères affectée à l'attribut class n'a aucune importance. Imaginez que vous demandiez dans une classe des caractères en vert, puis dans une autre classe des caractères en rouge : le navigateur va devoir prendre une décision et cette décision ne dépendra pas de l'ordre dans lequel sont placées les classes. La décision sera prise en fonction d'autres critères (* cascade CSS).

Tester le code

#2 La propriété classList open

La propriété classList est un objet JavaScript qui fonctionne comme un tableau. Le tableau contient la liste des classes qui sont positionnées sur un élément. Et l'objet met à disposition un ensemble de méthodes qui permet de manipuler cette liste de classes.

La propriété classList
Tester le code

#3 Tester si une classe est positionnée sur un élément avec classList.contains() open

Tester le code

#4 Ajouter une classe avec classList.add() open

En fait, on ajoute une classe, à celles qui sont déjà positionnées sur l'élément, s'il y en a.

Tester le code

#5 Supprimer une classe avec classList.remove() open

En fait, on supprime une classe parmi celles qui sont déjà positionnées sur l'élément, s'il y en a.

Tester le code

#6 Utiliser classList.toggle() open

La méthode toggle('nomDeLaClasse') permet d'ajouter une classe à un élément, si celle-ci ne l'est pas au moment de l'appel à toggle(), et réciproquement de la supprimer si elle y est.

Tester le code Tester le code