Cách thực hiện - Xóa một lớp
Tìm hiểu cách xóa tên lớp khỏi một phần tử bằng JavaScript.
Xóa lớp
Bước 1) Thêm HTML:
Trong ví dụ này, chúng ta sẽ sử dụng một nút để xóa lớp "mystyle" khỏi phần tử <div> có id="myDIV":
Ví dụ
<button onclick="myFunction()">Try it</button>
<div id="myDIV"
class="mystyle">
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à xóa lớp "mystyle" khỏi nó:
Ví dụ
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.remove("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 thêm 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.