Thuộc tính CSS visibility được dùng để chỉ định xem phần tử có hiển thị trong tài liệu hay không. Dù phần tử được render (vẽ) nhưng nếu visibility: hidden thì nó không được hiển thị ra mắt người dùng.
Các giá trị của CSS Visibility
| STT | Giá trị & Mô tả |
|---|---|
| 1 | visible (mặc định) - Phần tử và con của nó hiển thị |
| 2 | hidden - Ẩn phần tử và con, nhưng vẫn render và chiếm diện tích trang |
| 3 | collapse - Chỉ dùng cho table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). Xóa hàng/cột, không gian được giải phóng cho nội dung khác. Trên các phần tử khác, hoạt động như 'hidden' |
| 4 | initial - Đặt visibility về giá trị mặc định |
| 5 | inherit - Kế thừa giá trị visibility từ phần tử cha |
Ví dụ 1: visibility: collapse trên table row
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form, table { width: 70%; margin: 0 auto; text-align: center; }
table, th, td { border-collapse: collapse; border: 1px solid black; }
thead { background-color: goldenrod; }
tbody { background-color: khaki; }
tr:nth-of-type(3) { visibility: collapse; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead><tr><th>Name</th><th>Course</th></tr></thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>
Kết quả
Không áp dụng CSS Visibility collapse:
Áp dụng CSS Visibility collapse:
Ví dụ 2: visibility: hidden với JavaScript
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</title>
<style>
form { width: 70%; margin: 0 auto; text-align: center; }
* { padding: 2px; margin: 5px; box-sizing: border-box; }
input[type="button"] { border-radius: 10px; }
.child { display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; }
.child:nth-of-type(1) { background-color: #FF8A00; }
.child:nth-of-type(2) { background-color: #F44336; }
.child:nth-of-type(3) { background-color: #C303C3; }
.child:nth-of-type(4) { background-color: #4CAF50; }
.child:nth-of-type(5) { background-color: #03A9F4; }
.child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-hidden</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div>
<div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function visibilityHidden() {
for (var i = 0; i < 3; i++) primaryColor[i].style.visibility = 'hidden';
}
</script>
</body>
</html>
Kết quả
Trước khi nhấn 'Hide Primary Colors':
Sau khi nhấn 'Hide Primary Colors':
So sánh visibility vs display: Xem bài Difference Between CSS Display and Visibility.