Giới thiệu

Trong HTML, thuộc tính class trong HTML dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML. Tên lớp có thể dùng trong CSS hoặc JavaScript để thực hiện một số tác vụ nhất định cho phần tử có tên lớp đó. Trong CSS, để chọn phần tử có lớp đặc biệt, ta thêm dấu chấm (.) và sau đó điền tên lớp.

Ví dụ dùng CSS để tạo kiểu cho tất cả các phần tử có tên lớp là “thành phố”

<style>
 .thành phố {
  background-color: tomato;
  color: white;
  padding: 10px;
 }
</style>
 
 <h2 class="thành phố">Hà Nội</h2>
 <p>Hà Nội là thủ đô của Việt Nam.</p>
 
 <h2 class="thành phố">Paris</h2>
 <p>Paris là thủ đô của Pháp.</p>
 
 <h2 class="thành phố">Tokyo</h2>
 <p>Tokyo là thủ đô của Nhật Bản.</p>

Kết quả hiển thị sẽ như dưới đây.

Lưu ý:

• Thuộc tính class có thể dùng với bất kì phần tử HTML nào.
• Tên lớp có phân biệt giữa chữ viết hoa và viết thường.

Dùng thuộc tính class trong JavaScript

JavaScript có thể truy cập các phần tử có tên lớp nhất định bằng getElementsByClassName()

Ví dụ khi người dùng click vào một nút, ẩn tất cả các phần tử có tên lớp là “thành phố”.

function myFunction() {
  var x = document.getElementsByClassName("thành phố");
  for (var i = 0; i < x.length; i++) {
   x[i].style.display = "none";
  }
}

Sử dụng nhiều lớp trong HTML

Các phần tử HTML có thể dùng nhiều tên lớp, mỗi tên lớp cách nhau một khoảng trắng. Ví dụ có thể tạo kiểu cho phần tử bằng lớp “thành phố” và lớp “lớn”.

<h2 class="thành phố lớn">London</h2>
<h2 class="thành phố">Paris</h2>
<h2 class="thành phố">Tokyo</h2>

Cùng một lớp nhưng thẻ khác nhau

Các thẻ khác nhau như <h2> hay <p> có thể dùng cùng một tên lớp (và có kiểu cách giống nhau).

<h2 class="thành phố">Hà Nội</h2>
<p class="thành phố">Hà Nội là thủ đô của Việt Nam.</p>

Kết luận

Qua đây là một số chia sẻ về thuộc tính class trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.