HTML DOM Element classList
示例
為元素新增 "myStyle" 類
const list = element.classList;
list.add("myStyle");
自己動手試一試 »
從元素中移除 "myStyle" 類
const list = element.classList;
list.remove("myStyle");
自己動手試一試 »
切換 "myStyle" 的開/關狀態
const list = element.classList;
list.toggle("myStyle");
自己動手試一試 »
更多示例見下文。
描述
classList 屬性返回元素的 CSS 類名。
classList 屬性返回一個 DOMTokenList。
語法
元素.classList
返回值
| 型別 | 描述 |
| 物件 | 一個 DOMTokenList。 元素的類名列表。 |
注意
classList 屬性是隻讀的，但您可以使用下面列出的方法從列表中新增、切換或移除 CSS 類
classList 屬性和方法
| 名稱 | 描述 |
|---|---|
| add() | 向列表中新增一個或多個標記 |
| contains() | 如果列表中包含某個類，則返回 true |
| entries() | 返回一個包含列表中鍵/值對的迭代器 |
| forEach() | 對列表中的每個標記執行回撥函式 |
| item() | 返回指定索引處的標記 |
| keys() | 返回一個包含列表中鍵的迭代器 |
| length | 返回列表中標記的數量 |
| remove() | 從列表中移除一個或多個標記 |
| replace() | 替換列表中的標記 |
| supports() | 如果標記是屬性支援的標記之一，則返回 true |
| toggle() | 在列表中的標記之間切換 |
| value | 將標記列表作為字串返回 |
| values() | 返回一個包含列表中值的迭代器 |
更多示例
獲取 "myDIV" 元素的類名
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>我是 myDIV。</p>
</div>
const list = document.getElementById("myDIV").classList;
自己動手試一試 »
如果元素具有 "myStyle" 類，則移除 "anotherClass"。
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
自己動手試一試 »
在類之間切換以建立下拉按鈕
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
自己動手試一試 »
建立粘性導航欄
// 獲取導航欄
const navbar = document.getElementById("navbar");
// 獲取導航欄的偏移位置
const sticky = navbar.offsetTop;
// 當您滾動到導航欄的位置時，為其新增粘性類
// 當您離開滾動位置時，移除它
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
自己動手試一試 »
瀏覽器支援
element.classList 在所有瀏覽器中都受支援
| Chrome | IE | Edge | Firefox | Safari | Opera |
| 是 | 10-11 | 是 | 是 | 是 | 是 |
