Thuộc tính class trong HTML

Trong HTML, thuộc tính class 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.

Thuộc tính class áp dụng cho nhiều phần tử

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ố”.

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

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>

Bài trước: Phần tử khối và nội dòng trong HTML

Bài sau: Thuộc tính id trong HTML