HTML DOM Element classList egenskap

Definition och användning

classList Egenskapen returnerar elementets CSS-klassnamn.

classList Egenskapen returnerar DOMTokenList.

Exempel

Exempel 1

Lägg till "myStyle"-klassen till elementet:

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

亲自试一试

Exempel 2

Ta bort "myStyle"-klassen från elementet:

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

亲自试一试

Exempel 3

Växla öppen/stängd för "myStyle":

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

亲自试一试

Tips:Mer exempel på sidan nedan.

Syntaks

element.classList

Returvärde

Typ Beskrivning
Objekt DOMTokenList. Listan över elementets klassnamn.

Kommentar:classList egenskapen är skrivskyddad, men du kan använda de metoder som listas nedan för att lägga till, växla eller ta bort CSS-klasser från listan:

classList egenskaper och metoder

Namn Beskrivning
add() Lägg till en eller flera token till listan.
contains() Returnerar true om listan innehåller klasser.
entries() Returnerar en iteratör med nyckel/värdepar från listan.
forEach() Kör en callback-funktion för varje token i listan.
item() Returnera token vid specifik index.
keys() Returnera en iterator som innehåller nycklarna i listan.
length Returnera antalet token i listan.
remove() Ta bort ett eller flera token från listan.
replace() Ersätt ett token i listan.
supports() Returnera true om token är ett egenskapsstödt token.
toggle() Växla mellan token i listan.
value Returnera en sträng som innehåller tokenlistan.
values() Returnera en iterator med värden från listan.

Mer exempel

Exempel 4

Lägg till flera klasser till elementet:

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

亲自试一试

Exempel 5

Ta bort flera klasser från elementet:

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

亲自试一试

Exempel 6

Hur många klassnamn har elementet?

let numb = element.classList.length;

亲自试一试

Exempel 7

Hämta klassnamnet för elementet "myDIV":

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

亲自试一试

Exempel 8

Hämta elementets första klass:

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

亲自试一试

Exempel 9

Har elementet klassen "myStyle"?

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

亲自试一试

Exempel 10

Om elementet har klassen "myStyle", ta bort "anotherClass":

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

亲自试一试

Exempel 11

Växla mellan klasser för att skapa en rullgardinsknapp:

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

亲自试一试

例子 12

创建粘性导航栏：

// 获取导航栏
const navbar = document.getElementById("navbar");
// 获取导航栏的偏移位置
const sticky = navbar.offsetTop;
// 当您到达其滚动位置时，将 sticky 类添加到导航栏
// 离开滚动位置时将其删除
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

亲自试一试

浏览器支持

所有浏览器都支持 element.classList：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相关页面

CSS 教程：CSS 语法

CSS 参考手册：CSS .class 选择器

DOMTokenList 对象

className 属性

getElementsByClassName() 方法

HTML DOM Style objekt