Comment basculer les classes

Basculer les classes

Étape 1 - Ajouter HTML :

Lorsque vous ajoutez la classe à id="myDIV" basculer entre les éléments div (dans cet exemple, nous utilisons un bouton pour basculer le nom de la classe).

<button onclick="myFunction()">Essayez</button>
<div id="myDIV">
  Ceci est un élément DIV.
</div>

Étape 2 - Ajouter CSS :

Ajouter un nom de classe pour basculer :

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

Étape 3 - Ajouter JavaScript :

obtenir id="myDIV" de l'élément <div> et dans "mystyle" Basculer entre les classes :

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Essayez personnellement

Pages associées

Tutoriel :Comment ajouter une classe

Tutoriel :Comment supprimer une classe

Référence manuelle :Attribut classList de l'élément DOM HTML