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>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
