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