ClassList

2

Permet d'accéder et de manipuler les classes d'un élément.

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

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

add

Permet d'ajouter une ou plusieurs classes comme suit:

// Ajoute une classe
element.classList.add('maClasse')

// Ajoute deux classes
element.classList.add('maClasse1', 'maClasse2')

Artistes mystère 🧑‍🎤 codepen.io/smnarnold/pen/MWWWZdp

remove

À l'opposé d'add, remove retire une ou plusieurs classes comme suit:

// Retire une classe
element.classList.remove('maClasse');

// Retire deux classes
element.classList.remove('maClasse1', 'maClasse2');

contains

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

element.classList.contains('element');
// true

element.classList.contains('gluten');
// false

toggle

Retire la classe si elle est déjà présente et l'ajoute si elle ne l'est pas.

element.classList.toggle('element');

Elle permet donc de simplifier le scénario suivant:

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

classList.toggle accepte aussi un deuxième paramètre forçant l'ajout ou le retrait de la classe.

Par exemple:

// Force l'ajout la classe
element.classList.toggle('element', true); 

// Force le retrait de la classe
element.classList.toggle('element', false);

Pour en savoir plus, voir cet article MDN🦖 sur classList.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme