HTML DOM Element classList eigenschap

Definitie en gebruik

classList Eigenschap retourneert de CSS-klassen van het element.

classList Eigenschap retourneert DOMTokenList.

Voorbeeld

Voorbeeld 1

Voeg de "myStyle" klasse toe aan het element:

const list = element.classList;
list.add("myStyle");

Probeer het zelf

Voorbeeld 2

Verwijder de "myStyle" klasse van het element:

const list = element.classList;
list.remove("myStyle");

Probeer het zelf

Voorbeeld 3

Wissel de aan-uitstand van "myStyle":

const list = element.classList;
list.toggle("myStyle");

Probeer het zelf

Tip:Meer voorbeelden zijn beschikbaar onder de pagina.

Syntaxis

element.classList

Retourneert waarde

Type Beschrijving
Object DOMTokenList. De lijst van classnamen van het element.

Opmerking:De classList eigenschap is alleen lezen, maar je kunt de hieronder vermelde methoden gebruiken om CSS-klassen aan de lijst toe te voegen, te wisselen of te verwijderen:

classList eigenschappen en methoden

Naam Beschrijving
add() Voeg één of meerdere tokens toe aan de lijst.
contains() Retourneert true als de lijst objecten bevat.
entries() Returnt een iterator met sleutel/waardeparen van de lijst.
forEach() Voer een callbackfunctie uit voor elk token in de lijst.
item() Geef het token op de specifieke index terug.
keys() Geef een iterator terug met de sleutels in de lijst.
length Geef het aantal tokens in de lijst terug.
remove() Verwijder een of meerdere tokens uit de lijst.
replace() Vervang een token in de lijst.
supports() Geef true terug als het token een ondersteunde eigenschap is.
toggle() Wissel tussen de tokens in de lijst.
value Geef de tokenlijst terug als string.
values() Geef een iterator terug met de waarden van de lijst.

Meer voorbeelden

Voorbeeld 4

Voeg meerdere klassen toe aan het element:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Probeer het zelf

Voorbeeld 5

Verwijder meerdere klassen van het element:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Probeer het zelf

Voorbeeld 6

Hoeveel klassen heeft het element?

let numb = element.classList.length;

Probeer het zelf

Voorbeeld 7

Haal de klassen van het element "myDIV" op:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p Ik ben myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Probeer het zelf

Voorbeeld 8

Haal de eerste klasse van het element op:

let className = element.classList.item(0);

Probeer het zelf

Voorbeeld 9

Heeft het element de klasse "myStyle"?

let x = element.classList.contains("myStyle");

Probeer het zelf

Voorbeeld 10

Verwijder "anotherClass" als het element de klasse "myStyle" heeft:

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Probeer het zelf

Voorbeeld 11

Wissel tussen klassen om een dropdown-knop te maken:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Probeer het zelf

Voorbeeld 12

Maak een hechtnavigatiebalk:

// Haal de navigatiebalk op
const navbar = document.getElementById("navbar");
// Haal de offsetpositie van de navigatiebalk op
const sticky = navbar.offsetTop;
// Voeg de sticky klasse toe aan de navigatiebalk wanneer je de scrollpositie bereikt
// Verwijder het wanneer je de scrollpositie verlaat
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Probeer het zelf

Browserondersteuning

Alle browsers ondersteunen element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning 9-11 Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Gerelateerde pagina's

CSS Handleiding:CSS Syntax

CSS Referentiemanual:CSS .class Selectie

DOMTokenList Object

className Eigenschap

getElementsByClassName() Methode

HTML DOM Style Object