CSS डिस्प्ले कोई नहीं डेवलपर को उस तत्व को छिपाने में मदद करता है जिसमें डिस्प्ले प्रॉपर्टी सेट नहीं है। उस तत्व के लिए जिसका प्रदर्शन किसी पर भी सेट नहीं है, इसके लिए कोई बॉक्स नहीं बनाया गया है और यहां तक कि इसके बाल तत्व भी हैं, जिनका प्रदर्शन किसी के अलावा अन्य मूल्यों पर सेट हो सकता है।
सिंटैक्स
CSS डिस्प्ले नो का सिंटैक्स निम्नलिखित है -
Selector {
display: none;
} उदाहरण
आइए CSS डिस्प्ले नो का एक उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
‘प्राथमिक रंग छुपाएं’ clicking क्लिक करने से पहले बटन -
‘प्राथमिक रंग छुपाएं’ . क्लिक करने के बाद बटन -
उदाहरण
आइए CSS डिस्प्ले नो का एक और उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
