Comment supprimer des classes CSS avec JavaScript sans jQuery ?

Supprimer des classes CSS avec JavaScript sans jQuery

Supprimer une classe CSS d'un élément à l'aide de JavaScript est une tâche courante dans le développement Web. Pour y parvenir sans jQuery, il existe plusieurs approches, la plus simple étant l'utilisation de la propriété classList.

Utilisation de classList

La propriété classList fournit une interface simple pour manipuler des classes sur un élément. Pour supprimer une classe spécifique, utilisez simplement la méthode Remove() :

ELEMENT.classList.remove("CLASS_NAME");

Exemple

Considérez le code HTML et CSS suivant :

<div>

.red {
  background: red;
}

Pour supprimer la classe "red" de l'élément "el" à l'aide de classList, le code suivant peut être utilisé :

var el = document.getElementById("el");
el.classList.remove("red");

Approches alternatives

Bien que classList soit l'approche la plus recommandée, il existe d'autres moyens de supprimer des classes, telles que :

• Manipulation d'attribut : Définition de l'attribut className sur la nouvelle liste de classes sans la cible class.
• Remplacement d'expression régulière : Utilisation de replace() pour supprimer la classe cible de la chaîne className.

Cependant, ces méthodes sont moins efficaces et moins flexibles par rapport à l'utilisation de classList.

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!