🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedec chia sẻ về Thuộc tính class HTML được sử dụng để chỉ định một class cho một phần tử HTML.

Nhiều phần tử HTML có thể chia sẻ cùng một class.

1. Sử dụng thuộc tính class

Thuộc tính class thường được sử dụng để trỏ đến một tên class trong một kiểu. Nó cũng có thể được sử dụng bởi JavaScript để truy cập và thao tác các phần tử với tên class cụ thể.

Trong ví dụ sau, chúng ta có ba phần tử có thuộc tính class với giá trị là “city”. Tất cả ba yếu tố sẽ được tạo kiểu bằng nhau theo định nghĩa kiểu .city trong phần đầu:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <!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>HCM</h2>
  <p>HCM is the capital of VN.</p>
</div>

<div class="city">
  <h2>Hà Nội</h2>
  <p>Hà Nội is the capital of VN.</p>
</div>

<div class="city">
  <h2>Đà Nẵng</h2>
  <p>Đà Nẵng is the capital of VN.</p>
</div>

</body>
</html>

Copy and chạy code

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 class là trường hợp nhạy cảm!

2. Cú pháp cho class

Để tạo một class; viết một ký tự dấu chấm (.), theo sau là tên class. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}:

Tạo một lớp có tên là “city”:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <!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>HCM</h2>
  <p>HCM is the capital of VN.</p>
</div>

<div class="city">
  <h2>Hà Nội</h2>
  <p>Hà Nội is the capital of VN.</p>
</div>

<div class="city">
  <h2>Đà Nẵng</h2>
  <p>Đà Nẵng is the capital of VN.</p>
</div>

</body>
</html>

Copy and chạy code

3. Nhiều class

Các phần tử HTML có thể thuộc về nhiều hơn một class.

Để định nghĩa nhiều class, hãy tách các tên class 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 class được chỉ định.

Trong ví dụ sau, phần tử <h2> đầu tiên thuộc về cả class city và cả main và sẽ nhận được các kiểu CSS từ cả hai lớp:

<h2 class="city main">HCM</h2>
<h2 class="city">HN</h2>
<h2 class="city">DN</h2>

Copy and chạy code

4. Các yếu 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 class.

Trong ví dụ sau, cả <h2> và <p> đều trỏ đến class “city” và sẽ có chung kiểu:

<h2 class="city">HN</h2>
<p class="city">HN is the capital of VN</p>

Copy and chạy code

5. Sử dụng thuộc tính lớp trong JavaScript

Tên class cũng có thể được JavaScript sử dụng để thực hiện các 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ử với một tên class cụ thể bằng phương thức getElementsByClassName ():

Nhấp vào nút để ẩn tất cả các thành phần với tên lớp “city”:

<!DOCTYPE html>
<html>
<body>

<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "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>

Đừng lo lắng nếu bạn không hiểu code trong ví dụ trên.

Bạn sẽ tìm hiểu thêm về JavaScript trong series tự học JavaScript của chúng tôi.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM