Làm thế nào để chuyển đổi lớp

Chuyển đổi lớp

Bước 1 - Thêm HTML:

Trong khi thêm tên lớp vào id="myDIV" chuyển đổi giữa các phần tử div (trong ví dụ này, chúng ta sử dụng nút để chuyển đổi tên lớp).

<button onclick="myFunction()">Thử</button>
<div id="myDIV">
  This is a DIV element.
</div>

Bước 2 - Thêm CSS:

Thêm một tên lớp để chuyển đổi:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

Bước 3 - Thêm JavaScript:

lấy id="myDIV" của phần tử <div> và trong "mystyle" Chuyển đổi giữa các lớp:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Thử trực tiếp

Trang liên quan

Hướng dẫn:Cách thêm lớp

Hướng dẫn:Cách xóa lớp

Tài liệu tham khảo:Thuộc tính classList của HTML DOM Element