Comment ajouter une classe

Apprenez à utiliser JavaScript pour ajouter des classes à des éléments.

Cliquez sur le bouton pour me rajouter la classe !

Ajouter la classe

Étape 1 - Ajouter HTML :

Ajouter la classe à id="myDIV" de l'élément div (dans cet exemple, nous utilisons un bouton pour ajouter la classe).

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

Étape 2 - Ajouter CSS :

Définir les styles de la classe spécifiée :

.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 l'ajoute "mystyle" Classe :

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

Essayez-le vous-même

Pages associées

Tutoriel :Comment basculer une classe

Tutoriel :Comment supprimer une classe

Manuel de référence :Attribut classList de l'élément DOM HTML

Manuel de référence :Attribut className de l'élément DOM HTML