Element.classList

Un objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.

Renvoie: Un objet DOMTokenList. Les méthodes toggle(), contains() et replace() renvoient true ou false.

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Paramètres
Plus d’exemples
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

JavaScript

const card = document.querySelector('#card')

card.classList.add('active', 'highlight')
card.classList.remove('highlight')
console.log(card.className)

console.log(card.classList.toggle('done'))
console.log(card.classList.contains('done'))
console.log(card.classList.toggle('done'))
console.log(card.className)

Console

card active

true

false

card active

Définition et utilisation

La propriété classList renvoie un objet DOMTokenList avec les classes de l’élément et des méthodes pour les modifier. C’est le moyen le plus pratique de changer l’apparence de la page depuis JavaScript : vous décrivez le style en CSS sous un nom de classe, et le script se contente de l’ajouter ou de la retirer.

Les méthodes les plus importantes sont add() et remove(), qui acceptent une ou plusieurs classes, toggle(), qui ajoute la classe si elle est absente et la retire si elle est présente, contains() pour vérifier, et replace(ancienne, nouvelle). toggle() renvoie true si la classe a été ajoutée, et le second argument (true ou false) permet de forcer le résultat.

Contrairement à l’écrasement de className, les méthodes de classList ne touchent pas aux autres classes. Ajouter une classe déjà présente, ou en retirer une qui n’existe pas, ne casse rien.

Syntaxe

element.classList.add(className1, className2, …)
element.classList.remove(className1, className2, …)
element.classList.toggle(className)
element.classList.toggle(className, force)
element.classList.contains(className)
element.classList.replace(oldClass, newClass)

Paramètres

className
chaîne
Le nom de la classe sans le point, par ex. "active".
force
booléen, optionnel
Dans toggle() : true ajoute toujours la classe, et false la retire toujours.
oldClass, newClass
chaînes
Dans replace() : la classe à remplacer et la classe qui prendra sa place.

Paramètre	Type	Description
className	chaîne	Le nom de la classe sans le point, par ex. `"active"`.
force	booléen, optionnel	Dans `toggle()` : `true` ajoute toujours la classe, et `false` la retire toujours.
oldClass, newClass	chaînes	Dans `replace()` : la classe à remplacer et la classe qui prendra sa place.

Plus d’exemples

Un bouton pour changer de thème

JavaScript

const panel = document.querySelector('#panel')
const button = document.querySelector('#theme')

button.addEventListener('click', () => {
  const isLight = panel.classList.toggle('light')
  console.log(isLight ? 'Thème clair' : 'Thème sombre')
})

button.click()

Console

Thème clair

Forcer l’état avec le second argument

JavaScript

const email = document.querySelector('#email')
const isValid = email.value.includes('@') && email.value.includes('.')

email.classList.toggle('invalid', !isValid)

console.log(email.classList.contains('invalid'))
console.log([...email.classList])

Console

true

['invalid']

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Indiquez les noms de classes sans le point : classList.add("active"), et non ".active".
Décrivez l’apparence en CSS, et contentez-vous de basculer des classes en JavaScript. Le code est plus lisible que de définir de nombreux styles via style.
Affecter element.className = "active" supprime toutes les autres classes, alors que classList.add() ajoute la classe à celles qui existent déjà.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez JavaScript dans le cours JavaScript et ReactDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours