Modifier les classes en JavaScript
#1
La propriété className
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. C'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).
#2
La propriété classList
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.
#3
Tester si une classe est positionnée sur un élément avec classList.contains()
#4
Ajouter une classe avec classList.add()
Par ajouter une classe on entend qu'on l'ajoute à la liste des classes qui est positionnée sur l'élément.
Tester le code
#5
Supprimer une classe avec classList.remove()
Par supprimer une classe on entend qu'on l'enlève de la liste des classes qui est positionnée sur un élément.
Tester le code
#6
Utiliser classList.toggle()
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.
