Sử dụng thuộc tính class
Thuộc tính HTML class được sử dụng để xác định các style giống nhau cho phần tử có cùng tên class.
Nghĩa là mọi phần tử có cùng tên class sẽ có chung định dạng và style.
Ví dụ ở đây chúng ta có ba phần tử <div> có cùng tên class:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.png)
Sử dụng thuộc tính class trên các phần tử nội tuyến
Thuộc tính class cũng có thể được sử dụng trên các phần tử nội tuyến:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
span.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>
.png)
Note: Thuộc tính class có thể được sử dụng trên mọi phần tử HTML. Tên class có phân biệt chữ hoa, chữ thường.
Bộ chọn phần tử với class cụ thể
Trong CSS, để chọn phần tử với class cụ thể, đặt một dấu chấm (.) trước tên class.
Ví dụ
Dùng CSS để style mọi phần tử có tên class là “city”:
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<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>
.png)
Nhiều class trên một phần tử
Các phần tử HTML có thể sở hữu nhiều tên class, mỗi tên class phải được phân tách bằng khoảng trắng (dấu cách).
Ví dụ
Style các phần tử với tên class “city”, và cũng style phần tử với tên class “main”
<!DOCTYPE html>
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
<body>
<h2>Nhiều Class</h2>
<p>Cả ba tiêu đề đều có class tên "city". Tuy nhiên, London còn có thêm tên class "main" dùng để căn giữa văn bản</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
.png)
Trong ví dụ trên, phần tử <h2> đầu tiên sở hữu cả hai class là “city” và “main” nên sẽ có style của cả hai class này.
Các thẻ khác nhau cũng có thể dùng chung tên class
Các thẻ khác nhau, như <h2> và <p>, có thể tên class giống nhau, bằng cách đó chúng có cùng kiểu style.
Ví dụ
<!DOCTYPE html>
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Thẻ khác nhau, nhưng cùng tên class</h2>
<p>Kể cả nếu hai phần tử không có cùng tên thẻ, chúng có thể có cùng tên class, và có kiểu style giống nhau</p>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>
</body>
</html>
.png)
Sử dụng thuộc tính class trong JavaScript
Tên class cũng có thể được sử dụng bởi JavaScript để thực hiện các tác vụ nhất định cho phần tử với tên class cụ thể.
JavaScript có thể truy cập các phần tử với tên class cụ thể bằng phương thức getElementsByClassName():
Ví dụ
Khi người dùng click vào nút sẽ ẩn mọi phần tử có class tên “city”
<!DOCTYPE html>
<html>
<body>
<h2>Sử dụng thuộc tính class trong JavaScript</h2>
<p>Nhấn vào nút "Hide elements" để ẩn mọi phần tử có tên class là "city"</p>
<button onclick="myFunction()">Hide elements</button>
<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>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
.png)
Trích nguồn từ: (https://www.w3schools.com/html/html_classes.asp)
