Modifier les classes CSS en JavaScript

Pour modifier l’apparence d’un élément avec JavaScript, sélectionnez-le et mettez à jour ses classes. Affectez className lorsque vous remplacez l’intégralité de l’attribut de classe ; utilisez classList pour ajouter, supprimer ou remplacer des jetons de classe individuels tout en préservant les autres classes. Un écouteur de clic peut effectuer le changement en réponse à une action du lecteur.

Différentes manières de modifier la classe CSS en JavaScript

La page complète ci-dessous attribue au div l’identifiant dimensions et utilise des classes CSS pour contrôler sa taille et son arrière-plan. La classe initiale bg_1 définit un arrière-plan cramoisi. Un clic sur l’élément supprime cette classe et ajoute bg_2, qui définit un arrière-plan bleu sarcelle. Vous pouvez enregistrer la page sous forme de fichier HTML et l’ouvrir dans un navigateur pour voir la transition.

Utiliser la propriété className

className est une propriété, et non une méthode. Lui affecter une chaîne remplace l’attribut de classe complet de l’élément. Par exemple, la définir sur "dimensions bg_2" change l’arrière-plan tout en conservant la classe de dimensionnement. La définir uniquement sur "bg_2" supprimerait aussi dimensions ; indiquez donc toutes les classes que l’élément doit conserver. Cette approche est utile lorsque vous souhaitez délibérément définir l’ensemble complet des classes, par exemple pour appliquer en une fois un groupe connu de classes d’état.

Utiliser classList.remove et classList.add

classList est une propriété qui expose des méthodes permettant de modifier des jetons de classe individuels. Appelez classList.remove("bg_1") et classList.add("bg_2") pour changer les classes d’arrière-plan sans toucher à dimensions ni à d’autres classes sans rapport. add ne duplique pas un jeton déjà présent, et remove n’affecte que le jeton nommé. Utilisez ces opérations lorsqu’un élément possède des classes qui doivent rester en place, y compris des classes ajoutées par d’autres comportements de la page.

Utiliser la méthode classList.replace()

classList.replace("bg_1", "bg_2") remplace un jeton par un autre et laisse les autres classes intactes. Le remplacement n’a lieu que lorsque bg_1 est présent ; lorsque l’ancien jeton est absent, aucun jeton n’est modifié. Choisissez cette méthode lorsqu’un état de classe correspond directement à un autre. Des appels distincts à remove et à add sont utiles lorsque vous voulez rendre les deux opérations explicites ou lorsque le gestionnaire a d’autres tâches à effectuer entre les deux.

Voici une page HTML complète, avec ses styles, son élément et son gestionnaire de clic. Le petit adaptateur JavaScript à la fin modélise la même interaction de page afin que l’exemple produise aussi un résultat de console déterministe ; dans un navigateur, le script en ligne de la page prend en charge le clic réel.

const html = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Change a CSS class</title>
  <style>
    .dimensions { width: 200px; height: 100px; }
    .bg_1 { background-color: crimson; }
    .bg_2 { background-color: teal; }
  </style>
</head>
<body>
  <div id="dimensions" class="dimensions bg_1">Click this box</div>
  <script>
    const element = document.getElementById("dimensions");
    element.addEventListener("click", () => {
      element.classList.remove("bg_1");
      element.classList.add("bg_2");
    });
  </script>
</body>
</html>`;

const element = {
  className: "dimensions bg_1",
  addEventListener(type, handler) {
    this.handler = handler;
  },
  classList: {
    remove(token) {
      element.className = element.className
        .split(" ")
        .filter((name) => name !== token)
        .join(" ");
    },
    add(token) {
      const names = element.className.split(" ");
      if (!names.includes(token)) names.push(token);
      element.className = names.join(" ");
    }
  }
};
const document = { getElementById: () => element };
const selected = document.getElementById("dimensions");
selected.addEventListener("click", () => {
  selected.classList.remove("bg_1");
  selected.classList.add("bg_2");
});
selected.handler();
console.log(selected.className);

dimensions bg_2

La partie navigateur montre le véritable modèle du DOM : document.getElementById("dimensions") renvoie l’élément, et addEventListener enregistre le rappel qui s’exécute lors d’un clic. L’adaptateur Node.js reproduit le changement de jetons de classe pour la sortie console, car Node.js ne fournit pas par défaut le DOM d’une page. La feuille de style détermine les couleurs visibles ; changer un nom de classe seul n’a aucun effet visuel tant qu’aucune règle CSS correspondante n’existe. Pour un remplacement complet et direct, utilisez className et énumérez toutes les classes à conserver. Pour un changement ciblé qui laisse intactes les classes de taille, de mise en page et d’état sans rapport, utilisez les méthodes de classList. Si votre gestionnaire semble ne rien faire, vérifiez que l’identifiant correspond et que les deux classes d’arrière-plan sont définies dans la feuille de style de la page.