Comment - Basculer la classe
Basculez entre l'ajout et la suppression d'un nom de classe d'un élément avec JavaScript.
Cliquez sur le bouton pour changer le nom de la classe !
Basculer la classe
Étape 1) Ajoutez du HTML :
Basculez entre l'ajout d'un nom de classe à l'élément div avec id="myDIV" (dans cet exemple, nous utilisons un bouton pour basculer le nom de la classe).
Exemple
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Étape 2) Ajoutez CSS :
Ajoutez un nom de classe pour basculer :
Exemple
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Étape 3) Ajoutez JavaScript :
Obtenez l'élément <div> avec id="myDIV" et basculez entre la classe "mystyle":
Exemple
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Conseil : consultez également Comment ajouter une classe .
Conseil : consultez également Comment supprimer une classe .
Conseil : En savoir plus sur la propriété classList dans notre référence JavaScript.