Maison >interface Web >js tutoriel >Comment supprimer les classes CSS des éléments à l'aide de JavaScript ?

Comment supprimer les classes CSS des éléments à l'aide de JavaScript ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-09 03:33:01650parcourir

How do I remove CSS classes from elements using JavaScript?

Suppression de classes CSS avec JavaScript

JavaScript offre une méthode directe pour supprimer les classes CSS des éléments sans avoir besoin de jQuery. Cette méthode utilise la propriété classList, qui est prise en charge par la plupart des navigateurs modernes.

Étapes pour supprimer une classe CSS à l'aide de classList :

  1. Sélectionnez le Élément : Identifiez l'élément dont vous souhaitez supprimer la classe CSS à l'aide de document.querySelector ou document.getElementById.
  2. Supprimer la classe : Utilisez la méthode classList.remove() pour supprimer la classe CSS souhaitée. La syntaxe est la suivante :

    ELEMENT.classList.remove("CLASS_NAME");

Exemple :

Pour supprimer la classe "red" d'un élément avec l'ID 'el ', vous utiliseriez le code suivant :

const el = document.querySelector('#el');
el.classList.remove("red");

Alternative Méthodes :

Bien que classList.remove() soit l'approche recommandée, il existe des méthodes alternatives pour supprimer les classes CSS :

  • .removeAttribute(): Cette méthode supprime un attribut entier, y compris le nom de la classe. Cependant, c'est moins efficace que classList.remove().
  • Remplacement de l'attribut de classe : Vous pouvez remplacer l'intégralité de l'attribut de classe par une nouvelle valeur qui exclut la classe que vous souhaitez supprimer.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn