Cách thực hiện - Thêm lớp học
Tìm hiểu cách thêm tên lớp vào một thành phần bằng JavaScript.
Thêm lớp
Bước 1) Thêm HTML:
Thêm tên lớp vào phần tử div bằng id="myDIV" (trong ví dụ này, chúng tôi sử dụng nút để thêm lớp).
Ví dụ
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Bước 2) Thêm CSS:
Tạo kiểu cho tên lớp được chỉ định:
Ví dụ
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Bước 3) Thêm JavaScript:
Lấy phần tử <div> có id="myDIV" và thêm lớp "mystyle" vào nó:
Ví dụ
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
Hãy tự mình thử »Mẹo: Đồng thời xem Cách chuyển đổi lớp A .
Mẹo: Xem thêm Cách xóa lớp .
Mẹo: Tìm hiểu thêm về thuộc tính classList trong Tài liệu tham khảo JavaScript của chúng tôi.
Mẹo: Tìm hiểu thêm về thuộc tính className trong Tài liệu tham khảo JavaScript của chúng tôi.