HTML DOM Element classList 屬性

定義和用法

classList 屬性返回元素的 CSS 類名。

classList 屬性返回 DOMTokenList。

實例

例子 1

將 "myStyle" 類添加到元素：

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

親自試一試

例子 2

從元素中刪除 "myStyle" 類：

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

親自試一試

例子 3

切換 "myStyle" 的開閉：

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

親自試一試

提示：頁面下方提供更多實例。

語法

element.classList

返回值

類型 描述
對象 DOMTokenList。元素的類名列表。

注釋：classList 屬性是只讀的，但您可以使用下面列出的方法從列表中添加、切換或刪除 CSS 類：

classList 屬性和方法

名稱 描述
add() 將一個或多個令牌添加到列表中。
contains() 如果列表包含類，則返回 true。
entries() 從列表中返回帶有鍵/值對的迭代器。
forEach() 為列表中的每個令牌執行回調函數。
item() 返回指定索引處的令牌。
keys() 返回包含列表中鍵的迭代器。
length 返回列表中的令牌數。
remove() 從列表中刪除一個或多個令牌。
replace() 替換列表中的令牌。
supports() 如果令牌是屬性支持的令牌之一，則返回 true。
toggle() 在列表中的令牌之間切換。
value 以字符串形式返回令牌列表。
values() 返回帶有列表中值的迭代器。

更多實例

例子 4

向元素添加多個類：

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

親自試一試

例子 5

從元素中刪除多個類：

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

親自試一試

例子 6

元素有多少個類名：

let numb = element.classList.length;

親自試一試

例子 7

獲取元素 "myDIV" 的類名：

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

親自試一試

例子 8

獲取元素的第一個類：

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

親自試一試

例子 9

元素是否有 "myStyle" 類？

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

親自試一試

例子 10

如果元素有 "myStyle" 類，則刪除 "anotherClass"：

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

親自試一試

例子 11

在類之間切換以創建下拉按鈕：

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 對象