Tên lớp phần tử DOM HTML
Ví dụ
Đặt thuộc tính lớp cho một phần tử:
element.className = "myStyle";
Hãy tự mình thử »Lấy thuộc tính lớp của "myDIV":
let value = document.getElementById("myDIV").className;
Hãy tự mình thử »Chuyển đổi giữa hai tên lớp:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Thuộc tính className
đặ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ả về
Type | Description |
String | The class, or a space-separated list of classes, of an element |
Thêm ví dụ
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;
Hãy tự mình thử »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;
Hãy tự mình thử »Ghi đè thuộc tính lớp hiện có bằng thuộc tính mới:
element.className = "newClassName";
Hãy tự mình thử »Để thêm các lớp mới mà không ghi đè các giá trị hiện có, hãy thêm khoảng trắng và các lớp mới:
element.className += " class1 class2";
Hãy tự mình thử »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";
}
Hãy tự mình thử »Nếu bạn cuộn 50 pixel từ đầu trang này, lớp "kiểm tra" 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ãy tự mình thử »Hỗ trợ trình duyệt
element.className
được hỗ trợ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |