Cách thực hiện - Chuyển đổi lớp
Chuyển đổi giữa việc thêm và xóa tên lớp khỏi một thành phần bằng JavaScript.
Chuyển đổi lớp
Bước 1) Thêm HTML:
Chuyển đổi giữa việc 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 để chuyển đổi tên 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:
Thêm tên lớp để chuyển đổi:
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à chuyển đổi giữa lớp "mystyle":
Ví dụ
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Hãy tự mình thử »Mẹo: Xem thêm Cách thêm lớp .
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.