Làm thế nào để - Chuyển đổi lớp học
Chuyển đổi giữa thêm và xóa tên lớp khỏi một phần tử bằng JavaScript.
Nhấp vào nút để chuyển đổi tên lớp!
Chuyển đổi lớp học
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 với id = "myDIV" (trong ví dụ này, chúng tôi sử dụng một nút để chuyển đổi tên 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:
Thêm tên lớp để chuyển đổi:
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à chuyển đổi giữa lớp "mystyle":
Thí dụ
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Mẹo: Cũng xem Cách Thêm Lớp học .
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.