Hoe - Een klas toevoegen
Leer hoe u een klassenaam aan een element toevoegt met JavaScript.
Klik op de knop om een klas aan mij toe te voegen!
Klasse toevoegen
Stap 1) HTML toevoegen:
Voeg een klassenaam toe aan het div-element met id="myDIV" (in dit voorbeeld gebruiken we een knop om de klasse toe te voegen).
Voorbeeld
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Stap 2) CSS toevoegen:
Stijl de opgegeven klassenaam:
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 voeg de "mystyle" class eraan toe:
Voorbeeld
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
Tip: zie ook Hoe u een klas kunt wisselen .
Tip: zie ook Hoe u een klasse kunt verwijderen .
Tip: Lees meer over de eigenschap classList in onze JavaScript-referentie.
Tip: Lees meer over de eigenschap className in onze JavaScript-referentie.