Comment supprimer une classe CSS à l'aide de Vanilla JavaScript ?

Supprimer une classe CSS : un guide JavaScript complet

Supprimer une classe CSS d'un élément à l'aide de JavaScript Vanilla est une tâche courante rencontrée par les développeurs Web. . Contrairement à jQuery, qui fournit une API simplifiée, JavaScript offre une approche polyvalente et de bas niveau pour cette opération.

Pour supprimer efficacement une classe CSS, la technique privilégiée et standardisée consiste à exploiter la propriété classList. Pris en charge dans les navigateurs modernes, il permet une manipulation précise des classes.

SOLUTION

L'extrait suivant illustre la syntaxe appropriée :

ELEMENT.classList.remove("CLASS_NAME");

Cet extrait de code supprime la classe spécifiée (CLASS_NAME) de l'élément cible (ELEMENT).

EXEMPLE

Considérons l'exemple suivant, où nous avons un bouton qui active la suppression de la classe "rouge" d'un div :

remove.onclick = () => {
  const el = document.querySelector('#el');
  el.classList.remove("red");
};

.red {
  background: red
}

<div>

En cliquant sur le bouton "Supprimer la classe", le fond "rouge" sera supprimé du div.

Comprendre comment supprimer les classes CSS avec JavaScript est crucial pour maintenir une page Web dynamique avec un contrôle précis sur les styles des éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!