Thuộc tính classList của phần tử DOM HTML

Định nghĩa và cách sử dụng

classList Thuộc tính trả về tên lớp CSS của phần tử.

classList Thuộc tính trả về DOMTokenList.

Thực hành

Ví dụ 1

Thêm class "myStyle" vào phần tử:

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

Thử ngay

Ví dụ 2

Xóa class "myStyle" khỏi phần tử:

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

Thử ngay

Ví dụ 3

Chuyển đổi mở/closed của "myStyle":

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

Thử ngay

Lưu ý:Nhiều ví dụ hơn được cung cấp ở cuối trang.

Cú pháp

element.classList

Giá trị trả về

Loại Mô tả
Đối tượng DOMTokenList. Danh sách tên lớp của phần tử.

Ghi chú:Thuộc tính classList là chỉ đọc, nhưng bạn có thể sử dụng các phương thức sau để thêm, chuyển đổi hoặc xóa CSS class từ danh sách:

Thuộc tính và phương thức classList

Tên Mô tả
add() Thêm một hoặc nhiều thẻ từ vào danh sách.
contains() Trả về true nếu danh sách chứa đối tượng.
entries() Trả về bộ lặp có cặp khóa/giá trị từ danh sách.
forEach() Chạy hàm gọi lại cho mỗi ký tự trong danh sách.
item() Trả về ký tự tại chỉ mục cụ thể.
keys() Trả về bộ迭代 chứa các khóa trong danh sách.
length Trả về số lượng ký tự trong danh sách.
remove() Xóa một hoặc nhiều ký tự trong danh sách.
replace() Thay thế ký tự trong danh sách.
supports() Trả về true nếu ký tự là một trong các ký tự được hỗ trợ bởi thuộc tính.
toggle() Chuyển đổi giữa các ký tự trong danh sách.
value Trả về danh sách các ký tự từ danh sách.
values() Trả về bộ迭代 chứa giá trị trong danh sách.

Các ví dụ khác

Ví dụ 4

Thêm nhiều lớp vào phần tử:

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

Thử ngay

Ví dụ 5

Xóa nhiều lớp từ phần tử:

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

Thử ngay

Ví dụ 6

Phần tử có bao nhiêu tên lớp?

let numb = element.classList.length;

Thử ngay

Ví dụ 7

Lấy tên lớp của phần tử "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Tôi là myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Thử ngay

Ví dụ 8

Lấy lớp đầu tiên của phần tử:

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

Thử ngay

Ví dụ 9

Phần tử có lớp "myStyle" không?

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

Thử ngay

Ví dụ 10

Nếu phần tử có lớp "myStyle", thì xóa "anotherClass":

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

Thử ngay

Ví dụ 11

Chuyển đổi giữa các lớp để tạo nút thả xuống:

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

Thử ngay

Ví dụ 12

Tạo thanh hướng dẫn dính:

// Lấy thanh hướng dẫn
const navbar = document.getElementById("navbar");
// Lấy vị trí cuộn của thanh hướng dẫn
const sticky = navbar.offsetTop;
// Khi bạn đến vị trí cuộn của nó, thêm lớp sticky vào thanh hướng dẫn
// Xóa khi thoát khỏi vị trí cuộn
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Thử ngay

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Giáo trình CSS:Ngôn ngữ CSS

Tài liệu tham khảo CSS:Chọn器 .class của CSS

Đối tượng DOMTokenList

Thuộc tính className

Phương thức getElementsByClassName()

Đối tượng Style của HTML DOM