HTML Phần tử DOM className
❮ Đối tượng phần tửThí dụ
Đặt thuộc tính lớp cho một phần tử:
element.className = "myStyle";
Nhận thuộc tính lớp của "myDIV":
let value = document.getElementById("myDIV").className;
Chuyển đổi giữa hai tên lớp:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Thêm ví dụ bên dưới.
Định nghĩa và Cách sử dụng
Thuộc classNametính đặt hoặc trả về thuộc tính lớp của một phần tử.
Cú pháp
Trả về thuộc tính className:
HTMLElementObject.className
Đặt thuộc tính className:
HTMLElementObject.className = class
Giá trị tài sản
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Giá trị trả lại
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
Các ví dụ khác
Lấy thuộc tính lớp của phần tử <div> đầu tiên (nếu có):
let value = document.getElementsByTagName("div")[0].className;
Nhận một thuộc tính lớp với nhiều lớp:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Ghi đè một thuộc tính lớp hiện có bằng một thuộc tính mới:
element.className = "newClassName";
Để thêm các lớp mới mà không ghi đè các giá trị hiện có, hãy thêm một khoảng trắng và các lớp mới:
element.className += " class1 class2";
nếu "myDIV" có lớp "myStyle", hãy thay đổi kích thước phông chữ:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Nếu bạn cuộn 50 pixel từ đầu trang này, "bài kiểm tra" của lớp sẽ được thêm vào:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Hỗ trợ trình duyệt
element.classNameđược hỗ trợ trong tất cả các trình duyệt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮ Đối tượng phần tử