Thuộc tính visibility trong CSS
Bùi Tấn Lực - 938
- 01/10/2025
Chức năng của Thuộc tính visibility trong CSS
Thuộc tính visibility trong CSS dùng để ẩn các phần tử con nằm trong phần tử cha nhưng không mất đi bố cục giao diện, nó hiện ra với chiều rộng chiều cao như lúc chưa ẩn và không có gì trong đó, đối với table thì nó ẩn đi một hàng và hàng đó giống như bị xóa.
Cú pháp của Thuộc tính visibility trong CSS
visibility: giatri;
giatri: Giá trị để ẩn các phần tử con nằm trong phần tử cha nhưng không mất đi bố cục giao diện, riêng collapse sẽ ẩn luôn một hàng của table, giống như không tồn tại (Ví dụ: hidden, visible, collapse)
Các giá trị của Thuộc tính visibility trong CSS
visible: Để hiển thị phần tử HTML.
hidden: Để ẩn nội dung trong phần tử HTML nhưng chiều cao chiều rộng không bị thay đổi (giống như nội dung không nhìn thấy nhưng vẫn ở đó).
collapse: Dành cho table, ẩn luôn cả hàng trong table, giống như hàng đó không tồn tại và cũng không chiếm chổ.
initial: Trả về giá trị ban đầu của trình duyệt (thường là visible).
inherit: Kế thừa giá trị visibility từ phần tử cha của nó.
Code Thuộc tính visibility trong CSS
Giá trị hidden của thuộc tính visibility trong CSS
Giá trị visible để hiển thị, giá trị hidden để ẩn nội dung trong phần tử HTML nhưng chiều cao chiều rộng không bị thay đổi (giống như nội dung không nhìn thấy nhưng vẫn ở đó):
visibility:hidden; Ẩn nội dung trong phần tử HTML
visibility:visible; Hiện nội dung trong phần tử HTML
<!DOCTYPE html>
<html>
<head>
<title>Giá trị hidden của thuộc tính visibility trong CSS</title>
<style>
div{width:100%; float:left; height:auto; background:#ddd; padding:10px; margin-bottom:15px}
</style>
</head>
<body>
<h1>Giá trị hidden của thuộc tính visibility trong CSS</h1>
<p>Giá trị visible để hiển thị, giá trị hidden để ẩn nội dung trong phần tử HTML nhưng chiều cao chiều rộng không bị thay đổi (giống như nội dung không nhìn thấy nhưng vẫn ở đó):</p>
<div>
visibility:hidden; <span style="visibility:hidden;">Ẩn nội dung</span> trong phần tử HTML
</div>
<div>
visibility:hidden; <span style="visibility:visible;">Hiện nội dung</span> trong phần tử HTML
</div>
</body>
</html>
Giá trị collapse của thuộc tính visibility trong CSS
Ẩn luôn cả hàng trong table, giống như hàng đó không tồn tại và cũng không chiếm chổ:
visibility: collapse;
<!DOCTYPE html>
<html>
<head>
<title>Giá trị collapse của thuộc tính visibility trong CSS</title>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Giá trị collapse của thuộc tính visibility trong CSS</h1>
<p>Ẩn luôn cả hàng trong table, giống như hàng đó không tồn tại và cũng không chiếm chổ:</p>
<h2>Trước khi dùng visibility:collapse;</h2>
<table>
<tr>
<td>Bùi Tấn lực</td>
<td>35</td>
</tr>
<tr>
<td>Nguyễn Thùy Dung</td>
<td>30</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>29</td>
</tr>
</table>
<h2>Sau khi dùng visibility:collapse;</h2>
<table>
<tr>
<td>Bùi Tấn lực</td>
<td>35</td>
</tr>
<tr style="visibility:collapse">
<td>Nguyễn Thùy Dung</td>
<td>30</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>29</td>
</tr>
</table>
</body>
</html>
Khi nào nên sử dụng visibility trong CSS?
visibility phù hợp khi bạn muốn một phần tử tạm thời không còn nhìn thấy nhưng vẫn muốn giữ vị trí của nó trong bố cục. Đây là điểm khác biệt quan trọng so với những cách ẩn phần tử làm thay đổi không gian hiển thị.
Phân biệt visibility với display và opacity
Ba thuộc tính visibility, display và opacity đều có thể khiến người dùng không nhìn thấy phần tử, nhưng cách trình duyệt xử lý chúng không giống nhau.
| Thuộc tính | Cách hoạt động | Không gian bố cục |
|---|---|---|
| visibility: hidden | Ẩn phần tử nhưng vẫn giữ vị trí | Được giữ lại |
| display: none | Loại phần tử khỏi bố cục | Không được giữ lại |
| opacity: 0 | Làm phần tử trong suốt | Được giữ lại |
Vì vậy, nếu một phần tử cần biến mất khỏi tầm nhìn nhưng khoảng trống của nó vẫn phải được duy trì, visibility: hidden thường là lựa chọn phù hợp. Ngược lại, khi muốn phần tử không còn chiếm diện tích trong bố cục, display: none sẽ thích hợp hơn.
opacity: 0 cũng giữ nguyên không gian nhưng không đồng nghĩa với việc phần tử bị ẩn hoàn toàn về mặt tương tác. Trong một số trường hợp, phần tử vẫn có thể tham gia vào thao tác của người dùng. Vì vậy không nên xem opacity: 0 là phiên bản thay thế trực tiếp cho visibility: hidden.
Những trường hợp nên dùng visibility:hidden
visibility: hidden hữu ích khi giao diện cần giữ nguyên cấu trúc trong lúc tạm thời che một thành phần. Cách này phù hợp với các khu vực có kích thước cố định, nội dung xuất hiện theo trạng thái hoặc những thành phần cần tránh làm bố cục xê dịch khi được ẩn.
Ví dụ, một khu vực thông báo có thể được ẩn đi nhưng vẫn giữ chiều cao để các thành phần bên dưới không bị đẩy lên đột ngột:
.thong-bao {
visibility: hidden;
}
Khi cần hiển thị lại, chỉ cần chuyển sang trạng thái visible:
.thong-bao {
visibility: visible;
}
Cách sử dụng này đặc biệt hữu ích trong những giao diện mà việc thay đổi kích thước bố cục có thể gây cảm giác giật hoặc làm người dùng mất vị trí đang theo dõi.
Lưu ý khi sử dụng visibility:collapse
visibility: collapse là giá trị ít được sử dụng hơn hidden và có cách xử lý phụ thuộc vào loại phần tử. Giá trị này thường đáng chú ý nhất khi làm việc với hàng hoặc nhóm hàng trong bảng.
Với bảng HTML, collapse có thể được dùng để loại hàng hoặc nhóm hàng khỏi phần hiển thị trong khi cố gắng duy trì cấu trúc bảng. Tuy nhiên, cách trình duyệt xử lý giá trị này đối với những loại phần tử khác có thể không giống với hidden.
Do đó, nếu mục tiêu chỉ đơn giản là làm một phần tử không còn nhìn thấy nhưng vẫn giữ vị trí, visibility: hidden thường dễ dự đoán và dễ kiểm soát hơn. Chỉ nên chọn collapse khi bạn hiểu rõ hành vi của nó trong đúng loại phần tử đang sử dụng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính visibility trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
