Thuộc tính CSS Visibility được sử dụng để chỉ định một giá trị tương ứng với việc phần tử sẽ hiển thị hay không trong tài liệu. Mặc dù phần tử được hiển thị nhưng nếu CSS Visibility được đặt thành ẩn thì nó sẽ không hiển thị.
Sau đây là các giá trị Mức độ hiển thị CSS được sử dụng để kiểm soát mức độ hiển thị của phần tử -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | Hiển thị Nó là mặc định, phần tử và phần tử con của nó được hiển thị |
| 2 | ẩn Nó ẩn phần tử và phần tử con của nó là vô hình, nhưng phần tử vẫn được hiển thị và có không gian thích hợp trên trang |
| 3 | thu gọn Nó chỉ được sử dụng cho các hàng trong bảng ( |
| 4 | ban đầu Nó đặt khả năng hiển thị của phần tử thành giá trị mặc định của nó |
| 5 | inherit Nó chỉ định rằng giá trị của thuộc tính khả năng hiển thị phải được kế thừa từ phần tử mẹ |
Ví dụ
Hãy xem một ví dụ về thuộc tính CSS Visibility -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Tính năng thu gọn Chế độ hiển thị CSS không được áp dụng -
Tính năng thu gọn Chế độ hiển thị trong CSS được áp dụng -
Ví dụ
Hãy xem một ví dụ về CSS Visibility ẩn -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Trước khi nhấp vào ‘Ẩn màu chính’ nút -
Sau khi nhấp vào ‘Ẩn màu chính’ nút -
