Thuộc tính HTML DOM classList được sử dụng để trả về các tên lớp được liên kết với một phần tử HTML. Nó trả về tên lớp ở dạng DOMTokenlist. DOMTokenlist không là gì ngoài một tập hợp các mã thông báo được phân tách bằng không gian. Thuộc tính này hữu ích trong việc thêm, xóa hoặc chuyển đổi các lớp css của một phần tử.
Thuộc tính classList là thuộc tính chỉ đọc nhưng bạn có thể thêm hoặc xóa các lớp của một phần tử bằng phương thức add () và remove ().
Thuộc tính
Sau đây là thuộc tính của classList -
| Thuộc tính | Mô tả |
|---|---|
| Chiều dài | Để trả về số lớp trong danh sách. Nó ở chế độ chỉ đọc. |
Phương thức
Sau đây là các phương thức của classList -
| Phương pháp | Mô tả |
|---|---|
| thêm (class1, class2, class 3 ...) | Để thêm một hoặc nhiều tên lớp vào một phần tử. Nếu lớp đã cho đã tồn tại, nó sẽ không được thêm vào. |
| chứa (lớp) | Để trả về một giá trị Boolean hiển thị nếu một phần tử có tên lớp đã cho. Đúng nghĩa là phần tử chứa tên lớp đã chỉ định trong khi false nghĩa là phần tử đó không chứa tên lớp trong phần tử. |
| mục (chỉ mục) | Để trả về tên lớp với một số chỉ mục nhất định từ một phần tử. Lập chỉ mục bắt đầu từ 0 và sẽ trả về null nếu chỉ mục nằm ngoài phạm vi. |
| remove (class1, class2 class 3, ...) | Để xóa một hoặc nhiều tên lớp khỏi một phần tử. Nếu lớp được chỉ định trong remove không tồn tại, nó sẽ không gây ra lỗi. |
| chuyển đổi (lớp, true | false) | Để chuyển đổi giữa tên lớp cho một phần tử. Tham số đầu tiên thêm một lớp vào phần tử không tồn tại và trả về true trong khi nếu lớp tồn tại thì chỉ cần xóa nó khỏi phần tử và trả về false. Tham số thứ hai là tham số tùy chọn nhận giá trị Boolean và buộc lớp đã cho được thêm vào hoặc loại bỏ. Nó không quan tâm nếu nó tồn tại sớm hơn hay không. |
Cú pháp
Sau đây là cú pháp cho thuộc tính classList -
element.classList
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính HTML DOM classList -
<!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 the below button to add class to the below div element</p>
<button onclick="classAdd()">ADD CLASS</button>
<br>
<div id="DIV1">
sample div
</div>
<script>
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THÊM LỚP -
Trong ví dụ trên -
Chúng tôi đã tạo một phần tử div và ba lớp kiểu css mà chúng tôi 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> Sau đó, chúng tôi đã tạo một nút THÊM LỚP sẽ thực thi phương thức classAdd () khi nhấp chuột -
<button onclick="classAdd()">ADD CLASS</button>
Phương thức classAdd () nhận phần tử có id “DIV1” được liên kết với nó mà trong trường hợp của chúng ta là phần tử
function classAdd() {
document.getElementById("DIV1").classList.add("firstDiv", "secondDiv", "thirdDiv");
}