HTML DOM Element classList egenskab

Definering og brug

classList Egenskaben returnerer elementets CSS-klasser.

classList Egenskaben returnerer DOMTokenList.

Eksempel

Eksempel 1

Tilføj "myStyle"-klassen til elementet:

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

Prøv det selv

Eksempel 2

Fjern "myStyle"-klassen fra elementet:

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

Prøv det selv

Eksempel 3

Skift mellem åben og lukket tilstand for "myStyle":

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

Prøv det selv

Tip:Flere eksempler findes nedenfor på siden.

Syntaks

element.classList

Returværdi

Type Beskrivelse
Objekt DOMTokenList. Elementets klassenavnsliste.

Bemærk:classList egenskaben er skrivebeskyttet, men du kan bruge de nedenstående listede metoder til at tilføje, skifte eller fjerne CSS-klasser fra listen:

classList egenskab og metoder

Navn Beskrivelse
add() Tilføj en eller flere token til listen.
contains() Returnerer true, hvis listen indeholder en klasse.
entries() Returnerer en iterator med nøgle/værdipar fra listen.
forEach() Udfør en callback-funktion for hvert token i listen.
item() Returner tokenet ved den angivne indeks.
keys() Returner en iterator med nøglerne i listen.
length Returner antallet af token i listen.
remove() Fjern en eller flere token fra listen.
replace() Erstat tokenene i listen.
supports() Returner true, hvis tokenet er en støttet egenskab.
toggle() Skift mellem tokenene i listen.
value Returner en strengliste med tokenene.
values() Returner en iterator med værdierne i listen.

Flere eksempler

Eksempel 4

Tilføj flere klasser til elementet:

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

Prøv det selv

Eksempel 5

Fjern flere klasser fra elementet:

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

Prøv det selv

Eksempel 6

Hvor mange klassenavne har elementet?

let numb = element.classList.length;

Prøv det selv

Eksempel 7

Få klassenavnet for elementet "myDIV":

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

Prøv det selv

Eksempel 8

Få den første klasse for elementet:

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

Prøv det selv

Eksempel 9

Har elementet klassen "myStyle"?

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

Prøv det selv

Eksempel 10

Fjern "anotherClass" hvis elementet har klassen "myStyle":

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

Prøv det selv

Eksempel 11

Skift mellem klasser for at oprette en rullemenu

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

Prøv det selv

Eksempel 12

Opret en sticky navigationsfelt:

// Få navigationsfeltet
const navbar = document.getElementById("navbar");
// Få navigationsfeltets afstand
const sticky = navbar.offsetTop;
// Tilføj sticky-klassen til navigationsfeltet, når du når dens rulingsposition
// Fjern det, når du forlader rulingspositionen
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Prøv det selv

Browser support

Alle browsere understøtter element.classList:

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

Relaterede sider

CSS tutorial:CSS syntaks

CSS reference manual:CSS .class vælger

DOMTokenList objekt

className egenskab

getElementsByClassName() metode

HTML DOM Style Object