HTML DOM Element classList 属性

定义和用法

classList 属性返回元素的 CSS 类名。

classList 属性返回 DOMTokenList。

实例

例子 1

将 "myStyle" 类添加到元素：

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

Versuchen Sie es selbst

例子 2

从元素中删除 "myStyle" 类：

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

Versuchen Sie es selbst

例子 3

切换 "myStyle" 的开闭：

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

Versuchen Sie es selbst

提示：页面下方提供更多实例。

语法

element.classList

返回值

类型 描述
对象 DOMTokenList。元素的类名列表。

注释：classList 属性是只读的，但您可以使用下面列出的方法从列表中添加、切换或删除 CSS 类：

classList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 从列表中返回带有键/值对的迭代器。
forEach() Führen Sie für jedes Token in der Liste eine Callback-Funktion aus.
item() Gibt das Token an der angegebenen Indexposition zurück.
keys() Gibt einen Iterator zurück, der die Schlüssel in der Liste enthält.
length Gibt die Anzahl der Token in der Liste zurück.
remove() Entfernen Sie ein oder mehrere Token aus der Liste.
replace() Ersetzen Sie die Token in der Liste.
supports() Gibt true zurück, wenn das Token eines der unterstützten Attribute ist.
toggle() Wechseln Sie zwischen den Token in der Liste.
value Geben Sie die Token-Liste als String zurück.
values() Geben Sie einen Iterator zurück, der die Werte der Liste enthält.

Mehr Beispiele

Beispiel 4

Fügen Sie mehrere Klassen dem Element hinzu.

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

Versuchen Sie es selbst

Beispiel 5

Löschen Sie mehrere Klassen aus dem Element.

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

Versuchen Sie es selbst

Beispiel 6

Wie viele Klassennamen hat das Element?

let numb = element.classList.length;

Versuchen Sie es selbst

Beispiel 7

Erhalten Sie die Klassennamen des Elements "myDIV":

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

Versuchen Sie es selbst

Beispiel 8

Erhalten Sie die erste Klasse des Elements:

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

Versuchen Sie es selbst

Beispiel 9

Hat das Element die Klasse "myStyle"?

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

Versuchen Sie es selbst

Beispiel 10

Wenn das Element die Klasse "myStyle" hat, löschen Sie "anotherClass":

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

Versuchen Sie es selbst

Beispiel 11

Wechseln Sie zwischen den Klassen, um einen Dropdown-Pfeil zu erstellen:

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

Versuchen Sie es selbst

Beispiel 12

Erstellen Sie eine festsitzende Navigationsleiste:

// Erhalten Sie die Navigationsleiste
const navbar = document.getElementById("navbar");
// Erhalten Sie den Verschiebeposition der Navigationsleiste
const sticky = navbar.offsetTop;
// Fügen Sie die sticky-Klasse zur Navigationsleiste hinzu, wenn Sie ihreScrollposition erreichen
// Entfernen Sie es, wenn Sie dieScrollposition verlassen
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Versuchen Sie es selbst

Browserunterstützung

Alle Browser unterstützen element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung

Verwandte Seiten

CSS Tutorial:CSS Syntax

CSS Referenzhandbuch:CSS .class Selector

DOMTokenList Objekt

className Eigenschaft

getElementsByClassName() Methode

HTML DOM Style-Objekt