Thuộc tính className của HTML DOM Element

Định nghĩa và cách sử dụng

className Đặt hoặc trả về thuộc tính class của phần tử.

Xem thêm:

Thuộc tính classList của Element

Phương thức getElementsByClassName() của Document

Đối tượng Style của HTML DOM

Mô hình

Ví dụ 1

Đặt thuộc tính class của phần tử:

element.className = "myStyle";

thử nghiệm trực tiếp

Ví dụ 2

Lấy thuộc tính class của "myDIV":

let value = document.getElementById("myDIV").className;

thử nghiệm trực tiếp

Ví dụ 3

Chuyển đổi giữa hai tên lớp:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

thử nghiệm trực tiếp

Lưu ý:Cung cấp thêm ví dụ ở cuối trang.

Cú pháp

Trả về thuộc tính className:

HTMLElementObject.className

Đặt thuộc tính className:

HTMLElementObject.className = class

Giá trị thuộc tính

Giá trị miêu tả
class

tên lớp của phần tử.

Phân tách nhiều lớp bằng khoảng trống, ví dụ "test demo".

trả về giá trị

loại miêu tả
chuỗi lớp của phần tử, hoặc danh sách các lớp được phân tách bằng khoảng trống.

Nhiều ví dụ hơn

ví dụ 4

Lấy thuộc tính class của phần tử <div> đầu tiên (nếu có):

let value = document.getElementsByTagName("div")[0].className;

thử nghiệm trực tiếp

ví dụ 5

Lấy thuộc tính class của phần tử có nhiều lớp:

<div id="myDIV" class="myStyle test example">
<p>Tôi là myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

thử nghiệm trực tiếp

ví dụ 6

Thay thế thuộc tính class hiện tại bằng thuộc tính class mới:

element.className = "newClassName";

thử nghiệm trực tiếp

ví dụ 7

Để thêm lớp mới mà không thay thế giá trị hiện tại, hãy thêm khoảng trống và lớp mới:

element.className += " class1 class2";

thử nghiệm trực tiếp

ví dụ 8

Nếu "myDIV" có lớp "myStyle", hãy thay đổi kích thước字体:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

thử nghiệm trực tiếp

ví dụ 9

Nếu bạn cuộn 50 pixel từ đầu trang, bạn sẽ thêm lớp "test":

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

thử nghiệm trực tiếp

hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
hỗ trợ hỗ trợ hỗ trợ hỗ trợ hỗ trợ hỗ trợ

相关页面

Giáo trình CSS:Ngữ pháp CSS

Tài liệu tham khảo CSS:Chọn器 .class trong CSS