Cách thêm lớp

Học cách sử dụng JavaScript để thêm tên lớp vào phần tử.

Nhấp vào nút để thêm lớp cho tôi!

Thêm lớp

Bước 1 - Thêm HTML:

Thêm lớp vào id="myDIV" của phần tử div (trong ví dụ này, chúng ta sử dụng nút để thêm lớp).

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

Bước 2 - Thêm CSS:

Đặt样式 cho tên lớp được chỉ định:

.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à thêm "mystyle" Loại:

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

Thử ngay

Trang liên quan

Hướng dẫn:Cách chuyển đổi lớp

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

Hướng dẫn sử dụng:Thuộc tính classList của phần tử DOM HTML

Hướng dẫn sử dụng:Thuộc tính className của phần tử DOM HTML