Thuộc tính lớp HTML
Thuộc tính class HTML được sử dụng để chỉ định lớp cho phần tử HTML.
Nhiều phần tử HTML có thể chia sẻ cùng một lớp.
Sử dụng thuộc tính lớp
Thuộc tính class thường được sử dụng để trỏ đến tên lớp trong biểu định kiểu. Nó cũng có thể được JavaScript sử dụng để truy cập và thao tác các phần tử có tên lớp cụ thể.
Trong ví dụ sau, chúng ta có ba phần tử <div> với thuộc tính class có giá trị là "city". Tất cả ba phần tử <div> sẽ được tạo kiểu như nhau theo định nghĩa kiểu .city trong phần đầu:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Hãy tự mình thử » Trong ví dụ sau, chúng ta có hai phần tử <span> với thuộc tính class có giá trị là "note". Cả hai phần tử <span> sẽ được tạo kiểu như nhau theo định nghĩa kiểu .note trong phần đầu:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html> Hãy tự mình thử » Mẹo: Thuộc tính class có thể được sử dụng trên bất kỳ phần tử HTML nào.
Lưu ý: Tên lớp có phân biệt chữ hoa chữ thường!
Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi.
Cú pháp cho lớp
Để tạo một lớp; viết một ký tự dấu chấm (.), theo sau là tên lớp. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}:
Ví dụ
Tạo một lớp có tên là "thành phố":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Hãy tự mình thử »Nhiều lớp
Các phần tử HTML có thể thuộc nhiều lớp.
Để xác định nhiều lớp, hãy phân tách các tên lớp bằng dấu cách, ví dụ: <div class="city main">. Phần tử sẽ được tạo kiểu theo tất cả các lớp được chỉ định.
Trong ví dụ sau, phần tử <h2> đầu tiên thuộc về cả lớp city cũng như lớp main và sẽ nhận các kiểu CSS từ cả hai lớp:
Ví dụ
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Hãy tự mình thử »Các phần tử khác nhau có thể chia sẻ cùng một lớp
Các phần tử HTML khác nhau có thể trỏ đến cùng một tên lớp.
Trong ví dụ sau, cả <h2> và <p> đều trỏ đến lớp "city" và sẽ có cùng kiểu:
Ví dụ
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Hãy tự mình thử »Sử dụng thuộc tính lớp trong JavaScript
Tên lớp cũng có thể được JavaScript sử dụng để thực hiện một số tác vụ nhất định cho các thành phần cụ thể.
JavaScript có thể truy cập các phần tử có tên lớp cụ thể bằng phương thức getElementsByClassName() :
Ví dụ
Bấm vào nút để ẩn tất cả các thành phần có tên lớp "thành phố":
<script>
function myFunction() {
var x = document.getElementsByClassName("city") ;
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script> Hãy tự mình thử »Đừng lo lắng nếu bạn không hiểu mã trong ví dụ trên.
Bạn sẽ tìm hiểu thêm về JavaScript trong chương HTML JavaScript của chúng tôi hoặc bạn có thể nghiên cứu Hướng dẫn JavaScript của chúng tôi.
Tóm tắt chương
- Thuộc tính
classHTML chỉ định một hoặc nhiều tên lớp cho một phần tử - Các lớp được CSS và JavaScript sử dụng để chọn và truy cập các phần tử cụ thể
- Thuộc tính
classcó thể được sử dụng trên bất kỳ phần tử HTML nào - Tên lớp có phân biệt chữ hoa chữ thường
- Các phần tử HTML khác nhau có thể trỏ đến cùng một tên lớp
- JavaScript có thể truy cập các phần tử có tên lớp cụ thể bằng phương thức
getElementsByClassName()
Bài tập HTML
Video: Lớp HTML
