Thuộc tính classList trong HTML DOM dùng để trả về tên các class liên kết với một phần tử HTML. Trả về tên class dưới dạng DOMTokenList. DOMTokenList là tập hợp các token cách nhau bởi dấu cách. Thuộc tính này hữu ích trong việc thêm, xóa hoặc chuyển đổi (toggle) các class CSS của phần tử.
Thuộc tính classList là read-only nhưng bạn có thể thêm hoặc xóa class của phần tử bằng phương thức add() và remove().
Thuộc tính
Thuộc tính của classList:
| Thuộc tính | Mô tả |
|---|---|
| Length | Trả về số lượng class trong danh sách. Chỉ đọc. |
Phương thức
Dưới đây là các phương thức của classList:
| Phương thức | Mô tả |
|---|---|
| add(class1, class2, class3...) | Thêm một hoặc nhiều tên class vào phần tử. Nếu class đã tồn tại, không thêm nữa. |
| contains(class) | Trả về Boolean cho thấy phần tử có class tên cho trước hay không. True = có, False = không. |
| item(index) | Trả về tên class tại index cho trước. Index bắt đầu từ 0, trả về null nếu index vượt phạm vi. |
| remove(class1, class2, class3...) | Xóa một hoặc nhiều tên class từ phần tử. Nếu class không tồn tại, không báo lỗi. |
| toggle(class, true|false) | Chuyển đổi class cho phần tử. Tham số 1: thêm class nếu chưa có (trả về true), xóa nếu đã có (trả về false). Tham số 2 (tùy chọn): Boolean ép buộc thêm/xóa bất kể đã tồn tại hay chưa. |
Cú pháp
Cú pháp cho thuộc tính classList:
element.classList
Ví dụ
Dưới đây là ví dụ về thuộc tính classList HTML DOM:
<!DOCTYPE html> <html> <head> <style> .firstDiv { width: 200px; height: 200px; padding: 15px; border: 1px double blue; position:relative; top:10px; } .secondDiv { background-color: lightgreen; color: red; } .thirdDiv { text-transform: capitalize; text-align: center; font-size: 30px; } </style> </head> <body> <p>Click nút bên dưới để thêm class cho div element dưới</p> <button onclick="classAdd()">THÊM CLASS</button> <br> <div id="DIV1"> sample div </div> <script> function classAdd() { document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv"); } </script> </body> </html>
Kết quả
Ví dụ này sẽ cho kết quả sau:
Khi click nút THÊM CLASS:
Giải thích ví dụ:
Tạo div element và ba CSS class sẽ thêm vào div sau:
.firstDiv { width: 200px; height: 200px; padding: 15px; border: 1px double blue; position:relative; top:10px; } .secondDiv { background-color: lightgreen; color: red; } .thirdDiv { text-transform: capitalize; text-align: center; font-size: 30px; } <div id="DIV1"> sample div </div>
Nút THÊM CLASS thực thi classAdd() khi click:
<button onclick="classAdd()">THÊM CLASS</button>
classAdd() lấy phần tử id “DIV1” (div element). Dùng classList property và add() method thêm firstDiv, secondDiv, thirdDiv vào <div>:
function classAdd() { document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv"); }