HTML DOM Element classList 属性

定义和用法

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

classList 属性返回 DOMTokenList。

实例

例子 1

将 "myStyle" 类添加到元素：

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

Cuba sendiri

例子 2

从元素中删除 "myStyle" 类：

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

Cuba sendiri

例子 3

切换 "myStyle" 的开闭：

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

Cuba sendiri

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

语法

element.classList

返回值

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

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

classList 属性和方法

名称 描述
add() 将一个或多个令牌添加到列表中。
contains() 如果列表包含类，则返回 true。
entries() 从列表中返回带有键/值对的迭代器。
forEach() Lakukan fungsi balik untuk setiap token dalam senarai.
item() Kembalikan token di indeks yang ditentukan.
keys() Kembalikan iterator yang mengandungi kunci dalam senarai.
length Kembalikan bilangan token dalam senarai.
remove() Hapus satu atau lebih token dari senarai.
replace() Ganti token dalam senarai.
supports() Kembalikan true jika token adalah salah satu token yang disokong oleh properti.
toggle() Beralih antara token dalam senarai.
value Kembalikan senarai token dalam bentuk string.
values() Kembalikan iterator dengan nilai dalam senarai.

Contoh lebih banyak

Contoh 4

Tambah beberapa kelas ke elemen:

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

Cuba sendiri

Contoh 5

Hapus beberapa kelas dari elemen:

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

Cuba sendiri

Contoh 6

Berapa banyak nama kelas elemen?

let numb = element.classList.length;

Cuba sendiri

Contoh 7

Dapatkan nama kelas elemen "myDIV":

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

Cuba sendiri

Contoh 8

Dapatkan kelas pertama elemen:

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

Cuba sendiri

Contoh 9

Adakah elemen mempunyai kelas "myStyle"?

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

Cuba sendiri

Contoh 10

Jika elemen mempunyai kelas "myStyle", hapus "anotherClass":

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

Cuba sendiri

Contoh 11

Beralih antara kelas untuk membuat tombol menurun:

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

Cuba sendiri

Contoh 12

Cipta papan navigasi lekat:

// Dapatkan papan navigasi
const navbar = document.getElementById("navbar");
// Dapatkan kedudukan offset papan navigasi
const sticky = navbar.offsetTop;
// Kala anda mencapai kedudukan gerakan, tambahkan kelas sticky ke papan navigasi
// Buang kala dia keluar daripada kedudukan gerakan
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Cuba sendiri

Dukungan pelayar

Semua pelayar mendukung element.classList:

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

Halaman berkaitan

Panduan CSS:Syarat CSS

Panduan rujukan CSS:Pemilihan pilihan .class CSS

Objek DOMTokenList

Properti className

Metoden getElementsByClassName()

Objek Style HTML DOM