CÁCH THỨC - Thêm lớp học
Tìm hiểu cách thêm tên lớp vào một phần tử bằng JavaScript.
Nhấp vào nút để thêm một lớp học cho tôi!
Thêm lớp
Bước 1) Thêm HTML:
Thêm tên lớp vào phần tử div với id = "myDIV" (trong ví dụ này, chúng tôi sử dụng một nút để thêm lớp).
Thí 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:
Thí 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> với id = "myDIV" và thêm lớp "mystyle" vào nó:
Thí dụ
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");
}
Mẹo: Cũng xem Cách chuyển đổi một lớp .
Mẹo: Cũng xem Cách xóa một 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.