84. Gérer les classes : la propriété classList

Au lieu de définir directement des styles en ligne, la pratique moderne consiste à utiliser JavaScript pour gérer les classes CSS appliquées à un élément. La propriété classList fournit des méthodes simples pour cela.

Configuration HTML & CSS

css .hidden { display: none; } .active { border: 3px solid red; font-weight: bold; }

Méthodes de classList

1. .add(nomClasse) : Ajoute une ou plusieurs classes.
2. .remove(nomClasse) : Supprime une ou plusieurs classes.
3. .toggle(nomClasse) : Supprime la classe si elle existe, ou l'ajoute sinon.
4. .contains(nomClasse) : Renvoie true si l'élément possède la classe.

Exemple : Basculer la visibilité

javascript const menu = document.getElementById('main-menu');

// 1. Vérifier si l'élément possède une classe console.log(menu.classList.contains('hidden')); // true

// 2. Supprimer la classe 'hidden' pour l'afficher menu.classList.remove('hidden');

// 3. Ajouter la classe 'active' menu.classList.add('active');

// 4. Basculer une classe suite à un clic (cas d'utilisation courant) const toggleButton = document.getElementById('toggle-btn'); toggleButton.addEventListener('click', () => { menu.classList.toggle('active'); });