Thuộc tính lớp HTML
Thuộc tính HTML classđược sử dụng để chỉ định một lớp cho một 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 classtính 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 <div>phần tử có classthuộc tính với giá trị là "city". Tất cả ba <div>
yếu tố sẽ được tạo kiểu như nhau theo .city
định nghĩa kiểu trong phần đầu:
Thí 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>
Trong ví dụ sau chúng ta có hai <span>phần tử có classthuộc tính với giá trị là "note". Cả hai <span>
yếu tố sẽ được tạo kiểu như nhau theo .note
định nghĩa kiểu trong phần đầu:
Thí 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>
Mẹo: Thuộc classtính có thể được sử dụng trên bất kỳ phần tử HTML nào.
Lưu ý: Tên lớp 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 học; viết một ký tự dấu chấm (.), theo sau là một tên lớp. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}:
Thí dụ
Tạo một lớp có tên "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>
Nhiều lớp
Các phần tử HTML có thể thuộc về nhiều hơn một lớp.
Để xác định nhiều lớp, hãy tách tên lớp bằng một khoảng trắng, 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, <h2>phần tử đầu tiên thuộc về cả
citylớp và cũng thuộc về mainlớp và sẽ nhận được các kiểu CSS từ cả hai lớp:
Thí dụ
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
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ả hai <h2>và đều <p>
trỏ đến lớp "thành phố" và sẽ chia sẻ cùng một kiểu:
Thí dụ
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
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 các tác vụ nhất định cho các phần tử cụ thể.
JavaScript có thể truy cập các phần tử có tên lớp cụ thể bằng getElementsByClassName()phương thức:
Thí dụ
Nhấp vào 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("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Đừ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 JavaScript HTML 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 HTML
classchỉ đị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
classtính có thể được sử dụng trên bất kỳ phần tử HTML nào - Tên lớp 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
getElementsByClassName()phương thức