Comment modifier la classe d'un élément en JavaScript : meilleures pratiques 2025

Comment modifier la classe d'un élément en JavaScript : du débutant au pro en 2025

Avez-vous déjà souhaité qu'un bouton sur un site change de couleur au clic, ou qu'un menu glisse en douceur ? Tout cela est la magie de la modification des classes. La question « How can I change an element's class with JavaScript? » est l'une des plus populaires sur Stack Overflow (des dizaines de milliers de vues). Et ce n'est pas pour rien : sans cette compétence, il est difficile d'imaginer le développement web moderne.

En 2025, les navigateurs sont devenus encore plus intelligents, mais l'outil de base reste le même — classList. Dans cet article, nous allons passer en revue toutes les façons de modifier la classe d'un élément en JavaScript : des classiques aux techniques modernes. Vous apprendrez à éviter les pièges et à écrire un code dont vous n'aurez pas honte lors d'un entretien.

Pourquoi la modification de classe est-elle importante ?

Imaginez que vous construisez une maison en blocs. Chaque bloc est un élément HTML, et les classes sont des étiquettes qui disent : « je suis rouge », « je suis animé », « je suis caché ». Lorsque l'utilisateur clique sur un bouton, vous changez simplement l'étiquette — et l'élément prend vie. Sans la modification des classes, il faudrait redessiner toute l'interface, ce qui est lent et triste.

En 2025, modifier la classe d'un élément en JavaScript est une opération de base utilisée dans 9 sites interactifs sur 10. Des fenêtres modales au thème sombre, tout repose sur les classes.

JavaScript pur : classList — votre outil principal

Si vous utilisez encore className et la concaténation de chaînes — arrêtez-vous. En 2025, il y a classList. C'est une API intégrée qui fonctionne dans tous les navigateurs modernes (oui, même dans Safari).

Voici à quoi elle ressemble :

// On récupère l'élémentconst button = document.querySelector('.my-button');

// On ajoute une classebutton.classList.add('active');

// On supprime une classebutton.classList.remove('active');

// On bascule une classebutton.classList.toggle('active');

// On vérifie si la classe existeif (button.classList.contains('active')) {  console.log('Le bouton est actif !');}

Ce code est la base que tout le monde doit connaître. Mais il y a des nuances qui transforment un bon code en excellent code.

Classes multiples : ajouter et supprimer en une fois

Vous voulez ajouter plusieurs classes en même temps ? Facile :

element.classList.add('visible', 'animated', 'highlight');

Pareil pour la suppression :

element.classList.remove('hidden', 'fade-out');

Cela fonctionne même dans Internet Explorer 11 (si par hasard vous supportez les antiquités). En 2025, c'est la norme.

Remplacement de classe : remplacer une classe par une autre

Parfois, il faut remplacer une classe par une autre. Par exemple, basculer une icône de « soleil » à « lune ». Pour cela, il existe la méthode replace :

element.classList.replace('icon-sun', 'icon-moon');

Si la classe icon-sun n'existe pas — rien ne se passe, il n'y aura pas d'erreur. C'est sûr et lisible.

Basculement conditionnel : toggle avec un indicateur booléen

La méthode toggle peut accepter un deuxième argument — une valeur booléenne. Si true — la classe s'ajoute, si false — elle se supprime. C'est pratique lorsque vous voulez synchroniser une classe avec un état :

const isDarkMode = true;element.classList.toggle('dark', isDarkMode); // ajoutera 'dark'

const isLoggedIn = false;element.classList.toggle('logged-in', isLoggedIn); // supprimera 'logged-in'

C'est beaucoup plus propre que d'écrire un if-else.

Et className alors ? Quand est-il nécessaire ?

Le bon vieux className est toujours vivant, mais son temps est révolu. Il remplace toutes les classes d'un coup :

element.className = 'new-class another-class';

Le problème : si l'élément avait déjà des classes, elles seront effacées. En 2025, className n'est utilisé que dans deux cas :

• Lorsque vous avez besoin de remplacer complètement