HTML DOM Element classList 屬性

定義和用法

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

classList 屬性返回 DOMTokenList。

實例

例子 1

將 "myStyle" 類添加到元素：

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

Subukan Ngayon

例子 2

從元素中刪除 "myStyle" 類：

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

Subukan Ngayon

例子 3

切換 "myStyle" 的開閉：

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

Subukan Ngayon

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

語法

element.classList

返回值

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

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

classList 屬性和方法

名稱 描述
add() 將一個或多個令牌添加到列表中。
contains() 如果列表包含類，則返回 true。
entries() 從列表中返回帶有鍵/值對的迭代器。
forEach() 为列表中的每个令牌执行回调函数。
item() 返回指定索引处的令牌。
keys() 返回包含列表中键的迭代器。
length Bumalik ng bilang ng mga token sa listahan.
remove() Alisin ang isang o ilang token sa listahan.
replace() Palitan ang mga token sa listahan.
supports() Kung ang token ay isa sa mga suportadong token ng attribute, bumalik ng true.
toggle() Alitan ang mga token sa listahan.
value Bumalik ng listahan ng token bilang string.
values() Bumalik ng tagapag-iterator na may halaga sa listahan.

Higit pang halimbawa

Halimbawa 4

Magdagdag ng ilang klase sa elemento:

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

Subukan Ngayon

Halimbawa 5

Alisin ang ilang klase mula sa elemento:

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

Subukan Ngayon

Halimbawa 6

Ano ang bilang ng pangalan ng klase ng elemento?

let numb = element.classList.length;

Subukan Ngayon

Halimbawa 7

Hawakan ang pangalan ng klase ng elemento "myDIV":

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

Subukan Ngayon

Halimbawa 8

Hawakan ang unang klase ng elemento:

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

Subukan Ngayon

Halimbawa 9

Mayroon bang klase na "myStyle" ang elemento?

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

Subukan Ngayon

Halimbawa 10

Kung ang elemento ay may klase na "myStyle", alisin ang "anotherClass":

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

Subukan Ngayon

Halimbawa 11

Sa pag-alitan ng klase upang gumawa ng pindutin na pindutin:

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

Subukan Ngayon

Halimbawa 12

Buwbuo ng Navigation Bar na Magkapit:

// Hanapin ang navigation bar
const navbar = document.getElementById("navbar");
// Hanapin ang posisyon ng paggalaw ng navigation bar
const sticky = navbar.offsetTop;
// Idinagdag ang klase na sticky kapag nagiging maaring araw ang paggalaw
// Alisin ang klase na ito kapag natanggal sa posisyon ng paggalaw
function myFunction() {
  kung (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Subukan Ngayon

Suporta ng Browser

Lahat ng mga browser ay sumusuporta element.classList:

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

mga Related Page

Tuturuan sa CSS:Sintaks ng CSS

Manwal ng CSS:Selector na .class ng CSS

Objeto ng DOMTokenList

Atribute ng className

Metodong getElementsByClassName()

Object ng Style ng HTML DOM