Hoe een klasse toevoegen

Leer hoe je een klasse toevoegt aan een element met JavaScript.

Klik op de knop om de klasse voor mij toe te voegen!

Voeg klasse toe

Eerste stap - Voeg HTML toe:

Voeg de klasse toe aan id="myDIV" van het div-element (in dit voorbeeld gebruiken we een knop om de klasse toe te voegen).

<button onclick="myFunction()">Probeer het zelf</button>
<div id="myDIV">
  Dit is een DIV-element.
</div>

Tweede stap - Voeg CSS toe:

Stel de stijl in van de opgegeven klasse:

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

Derde stap - Voeg JavaScript toe:

Haal id="myDIV" van het <div>-element, en voeg toe "mystyle" Klasse:

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

Probeer het zelf

Gerelateerde pagina's

Handleiding:Hoe te wisselen van klasse

Handleiding:Hoe te verwijderen van klasse

Handleiding:HTML DOM Element classList eigenschap

Handleiding:HTML DOM Element className eigenschap