HTML Phần tử DOM classList
❮ Đối tượng phần tửThí dụ
Thêm một lớp "myStyle" vào một phần tử:
element.classList.add("myStyle");
Xóa lớp "myStyle" khỏi một phần tử:
element.classList.remove("myStyle");
Chuyển đổi giữa hai lớp cho một phần tử:
element.classList.toggle("newStyle");
Thêm ví dụ bên dưới.
Định nghĩa và Cách sử dụng
Thuộc classListtính trả về các tên lớp CSS của một phần tử.
Thuộc classListtính trả về một đối tượng DOMTokenList.
Thuộc classListtính chỉ đọc, nhưng bạn có thể sử dụng các phương thức add () và remove () để thêm hoặc xóa các lớp CSS.
Ghi chú
Thuộc classListtính này hữu ích cho cả việc thêm, xóa và chuyển đổi các lớp CSS trên một phần tử.
Xem thêm:
Cú pháp
element.classList
Giá trị tài sản
| Value | Description |
| length | The number of classes in the list. This property is read-only. |
Phương pháp
| Method | Description |
| add(class1, class2, ...) |
Adds one or more classes. |
| contains(class) |
Returns true if an element has the class, otherwise false.
|
| item(index) | Returns the class name with a specified index. Index starts at 0. Returns null if the index is out of range. |
| remove(class1, class2, ...) | Removes one or more classes from an element. Removing a class that does not exist, does NOT throw an error. |
| toggle(class, true|false) | Toggles between a class for an element. It removes the class and returns false.If the class does not exist, it adds the class and returns true.The optional second parameter is a boolean that forces the class to be added or removed, regardless of whether or not it already exists. The second parameter is not supported in Internet Explorer 11 or earlier. |
Giá trị trả lại
| Type | Description |
| Object | A DOMTokenList. A list of the class names of an element. |
Các ví dụ khác
Thêm nhiều lớp vào một phần tử:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Xóa nhiều lớp khỏi một phần tử:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Phần tử có bao nhiêu tên lớp:
let numb = element.classList.length;
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;
Nhận lớp đầu tiên của một phần tử:
let className = element.classList.item(0);
Một phần tử có lớp "myStyle" không?
let x = element.classList.contains("myStyle");
Loại bỏ "anotherClass" nếu một phần tử có một lớp "myStyle".
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
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");
}
Tạo một thanh điều hướng cố định:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
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 |
❮ Đối tượng phần tử