Hiển thị Không sử dụng trong CSS

CSS Display None giúp nhà phát triển ẩn phần tử có thuộc tính hiển thị được đặt thành không. Đối với phần tử có hiển thị được đặt thành không có hộp nào được tạo cho nó và ngay cả các phần tử con của nó có thể có hiển thị được đặt thành các giá trị khác với không.

Cú pháp

Sau đây là cú pháp cho CSS display none -

Selector {
   display: none;
}

Ví dụ

Hãy xem một ví dụ về CSS không hiển thị -

<!DOCTYPE html>
<html>
<head>
<title>CSS Display None</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-Display-None</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="displayNone()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function displayNone(){
   for(var i=0; i<3; i++)
   primaryColor[i].style.display = 'none';
}
</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 -

Hiển thị Không sử dụng trong CSS

Sau khi nhấp vào ‘Ẩn màu chính’ nút -

Hiển thị Không sử dụng trong CSS

Ví dụ

Hãy xem một ví dụ khác về CSS Display None -

<!DOCTYPE html>
<html>
<head>
<style>
#flex {
   display: flex;
}
#none {
   display: none;
}
.inline-block {
   display: inline-block;
   background-color: mintcream;
}
.grid {
   display: grid;
   background-color: orange;
}
div {
   margin: 50px;
   padding: 10px;
   height: 10px;
   line-height: 5px;
   text-align: center;
   background-color: red;
   border: 2px solid blue;
}
div > div {
   background-color: yellow;
   border: 2px solid green;
}
div > div > div {
   background-color: sandybrown;
   border: 4px solid darkred;
}
</style>
</head>
<body>
<div><span id="flex">AAAAAA</span>
<div><span id="none">BBBBBB</span>
<div>
<span class="inline-block">CCCCC</span>
<span class="inline-block">DDDDD</span>
<div>
<span class="grid">EEEE FFFF</span>
<span class="grid">GGGG HHHH</span>
</div>
</div>
</div>
</div>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Hiển thị Không sử dụng trong CSS