ClassList

La méthode classList permet de manipuler les classes d'un élément.

Afin d'alléger les exemples à venir, prenons pour acquis qu'une variable soda est populée pour chaque exemple.

const soda = document.querySelector('.soda');

add()

Permet d'ajouter une classe à un élément:

soda.classList.add('diet');

ou même plusieurs:

soda.classList.add('diet', 'cherry');

remove()

À l'opposé de add(), remove retire une classe à un élément:

soda.classList.remove('diet');

ou même plusieurs:

soda.classList.remove('diet', 'cherry');

contains()

Retourne un booléen (true/false) validant si une classe est présente ou non sur un élément.

Par exemple, avec l'élément HTML suivant:

<div class="soda diet">Coca-Cola</div>

La requête suivante retournerait true:

soda.classList.contains('diet'); // true

Tandis que celle-ci retournerait false:

soda.classList.contains('cherry'); // false

toggle()

Permets d'ajouter une classe si elle est actuellement absente ou à l'inverse de la retirer si elle est actuellement présente. Au même titre que le bouton d'allumage d'un ordinateur permet de l'allumer s'il est éteint ou de l'éteindre s'il est actuellement allumé.

Par exemple, avec l'élément HTML suivant:

<div class="soda diet">Coca-Cola</div>

La requête suivante ajouterait la classe cherry, puisqu'elle n'est pas déjà présente:

soda.classList.toggle('cherry');

Tandis qu'à l'opposé cette requête retirerait la classe diet puisqu'elle est déjà présente:

soda.classList.toggle('diet');

classList.toggle() fait donc l'équivalent du code suivant, mais de façon plus élégante:

if (soda.classList.contains('diet')) {
  soda.classList.remove('diet');
} else {
  soda.classList.add('diet');
}

Valeur forcée

classList.toggle() accepte une 2^e paramètre optionnel sous forme de booléen (true/false) permettant de forcer l'ajout ou le retrait d'une classe.

Par exemple, le code suivant force l'ajout de la classe diet:

soda.classList.toggle('diet', true); 

Ce code est l'équivalent de classList.add().

Tandis que le code suivant force le retrait de la classe diet:

soda.classList.toggle('diet', false); 

Soit l'équivalent de classList.remove().

className

La méthode className permet de récupérer ou de définir la classe d'un élément.

Pour obtenir les classes sont appliquées sur un élément, par exemple celui ci-dessous 👇

<div class="soda diet">Coca-Cola</div>

Il est suffit de faire:

soda.className; // "soda diet"

Si plusieurs classes sont présentes, plutôt que d'ajouter ou de retirer chacune d'elles manuellement via classList. Il est possible de définir directement le texte inscrit dans l'attribut de classe via className ainsi:

soda.className = "soda"; 

Seule cette classe existe sur l'élément maintenant.