Comment supprimer une classe CSS d'un élément à l'aide de JavaScript natif ?

Suppression d'une classe CSS d'un élément avec JavaScript natif

La suppression d'une classe CSS d'un élément HTML à l'aide de JavaScript peut être réalisée sans recourir à des tiers. bibliothèques de fête comme jQuery. Vous trouverez ci-dessous des instructions étape par étape :

1. Identifiez l'élément cible :

Utilisez la méthode document.querySelector() pour sélectionner l'élément HTML dont vous souhaitez supprimer la classe. Spécifiez l'ID de l'élément ou un autre identifiant unique.

2. Utilisez la propriété classList :

Les navigateurs modernes prennent en charge la propriété classList sur chaque élément. Cette propriété représente une liste de classes CSS appliquées à l'élément.

3. Supprimer la classe :

Pour supprimer une classe, utilisez simplement la méthode classList.remove() et transmettez le nom de la classe en argument. Par exemple :

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

Exemple :

L'extrait de code suivant montre comment supprimer la classe CSS "rouge" d'un élément dans une application pratique scénario :

const button = document.querySelector('#remove');
const element = document.querySelector('#el');

button.onclick = () => {
  element.classList.remove('red');
};

HTML :

<div>

CSS :

.red {
  background: red;
}

Lorsque l'option "Supprimer la classe " est cliqué, la classe CSS "rouge" sera supprimée de l'élément, changeant sa couleur d'arrière-plan par défaut.

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!