เราสามารถซ่อนหรือลบองค์ประกอบในเอกสาร HTML ด้วยคุณสมบัติ CSS Visibility และ CSS Display ตามลำดับ ผู้ใช้อาจไม่เห็นความแตกต่างในการใช้คุณสมบัติใดคุณสมบัติหนึ่ง แต่จริงๆ แล้วมีความแตกต่างกัน
CSS Display - none ไม่ได้เรนเดอร์องค์ประกอบบนเอกสาร และจึงไม่จัดสรรพื้นที่ให้
CSS Visibility - hidden เรนเดอร์องค์ประกอบบนเอกสาร และแม้พื้นที่จะถูกจัดสรร แต่จะไม่ทำให้มองเห็นได้ถึงผู้ใช้
ตัวอย่าง
ลองดูตัวอย่างสำหรับ 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 Visibility hidden:
<!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>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
ก่อนคลิกปุ่ม 'Hide Primary Colors':
หลังคลิกปุ่ม 'Hide Primary Colors':
