Danh sách lớp phần tử HTML DOM
Ví dụ
Thêm lớp "myStyle" vào một phần tử:
const list = element.classList;
list.add("myStyle");
Hãy tự mình thử »Xóa lớp "myStyle" khỏi một phần tử:
const list = element.classList;
list.remove("myStyle");
Hãy tự mình thử »Bật và tắt "myStyle":
const list = element.classList;
list.toggle("myStyle");
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Thuộc tính classList
trả về tên lớp CSS của một phần tử.
Thuộc tính classList
trả về DOMTokenList .
Xem thêm:
Cú pháp
element .classList
Giá trị trả về
Type | Description |
Object | A DOMTokenList . A list of the class names of an element. |
Ghi chú
Thuộc tính classList
ở dạng chỉ đọc, nhưng bạn có thể sử dụng các phương thức được liệt kê bên dưới để thêm, chuyển đổi hoặc xóa các lớp CSS khỏi danh sách:
Các thuộc tính và phương thức của danh sách lớp
Name | Description |
---|---|
add() | Adds one or more tokens to the list |
contains() | Returns true if the list contains a class |
entries() | Returns an Iterator with key/value pairs from the list |
forEach() | Executes a callback function for each token in the list |
item() | Returns the token at a specified index |
keys() | Returns an Iterator with the keys in the list |
length | Returns the number of tokens in the list |
remove() | Removes one or more tokens from the list |
replace() | Replaces a token in the list |
supports() | Returns true if a token is one of an attribute's supported tokens |
toggle() | Toggles between tokens in the list |
value | Returns the token list as a string |
values() | Returns an Iterator with the values in the list |
Thêm ví dụ
Thêm nhiều lớp vào phần tử an:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Hãy tự mình thử »Xóa nhiều lớp khỏi một phần tử:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Hãy tự mình thử »Lấy tên lớp của phần tử "myDIV":
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
Hãy tự mình thử »Xóa "anotherClass" nếu một phần tử có lớp "myStyle".
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
Hãy tự mình thử »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");
}
Hãy tự mình thử »Tạo một thanh điều hướng cố định:
// Get the navbar
const navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
const sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Hãy tự mình thử »Hỗ trợ trình duyệt
element.classList
được hỗ trợ trong tất cả các trình duyệt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 10-11 | Yes | Yes | Yes | Yes |