Hoe - Klasse wisselen
Schakel tussen het toevoegen en verwijderen van een klassenaam van een element met JavaScript.
Klik op de knop om de klasnaam te wijzigen!
Klasse wisselen
Stap 1) HTML toevoegen:
Schakel tussen het toevoegen van een klassenaam aan het div-element met id="myDIV" (in dit voorbeeld gebruiken we een knop om de klassenaam te wisselen).
Voorbeeld
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Stap 2) CSS toevoegen:
Voeg een klassenaam toe om te wisselen:
Voorbeeld
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Stap 3) JavaScript toevoegen:
Haal het <div> element op met id="myDIV" en wissel tussen de "mystyle" class:
Voorbeeld
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Tip: zie ook Hoe u een klas kunt toevoegen .
Tip: zie ook Hoe u een klasse kunt verwijderen .
Tip: Lees meer over de eigenschap classList in onze JavaScript-referentie.