ความแตกต่างcss display none กับ visibility hidden
#พื้นฐานเว็ปไซต์ #css#displaynone #visibility hidden
ความแตกต่างระหว่าง display: none และ visibility: hidden คือ display: none จะลบองค์ประกอบออกจากเค้าโครงของหน้าเว็บทั้งหมด ทำให้พื้นที่ที่เคยครอบครองอยู่หายไป และผู้ใช้อินเทอร์เฟซ (เช่น โปรแกรมอ่านหน้าจอ) จะมองไม่เห็นองค์ปร ะกอบนั้นเลย ในขณะที่ visibility: hidden จะซ่อนองค์ประกอบไว้ แต่จะยังคง สงวนพื้นที่ เดิมขององค์ประกอบนั้นไว้บนหน้าเว็บ ทำให้ช่องว่างยังคงอยู่เหมือนเดิม และองค์ประกอบนั้นยังสามารถโต้ตอบกับผู้ใช้ (เช่น คลิก) ได้ หากมีการตั้งค่าให้ทำเช่นนั้น
display: none
ผลกระทบต่อเค้าโครง (Layout):
ลบองค์ประกอบออกจากเค้าโครง ทำให้ไม่มีการใช้พื้นที่บนหน้าเว็บเลย
สถานะองค์ประกอบ:
เหมือนกับว่าองค์ประกอบนั้นไม่มีอยู่บนหน้าเว็บ
การโต้ตอบ (Interaction):
องค์ประกอบไม่สามารถโต้ตอบกับผู้ใช้ได้ และโปรแกรมอ่านหน้าจอจะไม่เข้าถึง
กรณีใช้งาน:
เหมาะกับการซ่อนองค์ประกอบทั้งหมดอย่างสิ้นเชิง เช่น ซ่อนเมนูที่ไม่ใช้งาน หรือสลับส่วนประกอบ UI เพื่อให้หน้าเว็บจัดเรียงใหม่
visibility: hidden
ผลกระทบต่อเค้าโครง (Layout):
องค์ประกอบจะซ่อน แต่ยังคงใช้พื้นที่เท่าเดิม
สถานะ องค์ประกอบ:
องค์ประกอบยังคงอยู่ แต่จะมองไม่เห็น
การโต้ตอบ (Interaction):
องค์ประกอบยังคงสามารถโต้ตอบกับผู้ใช้ได้ (เช่น คลิก) หากไม่ได้ถูกปิดด้วยคุณสมบัติอื่น
กรณีใช้งาน:
เหมาะกับการซ่อนเนื้อหาชั่วคราวโดยไม่เปลี่ยนการจัดวางขององค์ประกอบอื่นๆ หรือเมื่อต้องการซ่อนส่วนหนึ่งของเนื้อหา แต่ต้องการให้ช่องว่างยังคงอยู่
สรุปง่ายๆ
display: none: หายไปเลย ไม่ใช้ที่ว่าง
visibility: hidden: ซ่อนอยู่ แต่ใช้ที่ว่างเหมือนเดิม
นอกจากที่บทความอธิบายไว้เกี่ยวกับ display: none และ visibility: hidden แล้ว การเลือกใช้วิธีใดวิธีหนึ่งควรพิจารณาถึงผลกระทบต่อประสบการณ์ผู้ใช้งานด้วยครับ ในกรณีที่คุณซ่อนไอเท็มแต่ยังต้องการให้ช่องว่างนั้นยังคงอยู่เพื่อความสวยงามหรือโครงสร้างของหน้าเว็บ การใช้ visibility: hidden จะเหมาะกว่า เพราะองค์ประกอบจะยังใช้พื้นที่เดิม แต่ไม่แสดงผล ซึ่งเหมาะกับการซ่อนเนื้อหาชั่วคราว หรือเมนูที่ต้องการเปิดปิดแบบค่อยเป็นค่อยไป แต่หากเป้าหมายคือการลบองค์ประกอบนั้น ๆ ออกอย่างสมบูรณ์ ไม่ให้มีผลต่อการจัดวางและการโต้ตอบเลย ให้ใช้ display: none เพราะจะช่วยให้พื้นที่นั้นถูกตัดออกไป และยังช่วยลดภาระของเบราว์เซอร์ในการเรนเดอร์ส่วนที่ไม่จำเป็น อีกข้อสังเกตที่ผู้ใช้ควรระวังคือ หากใช้ visibility: hidden แล้วองค์ประกอบยังคงโต้ตอบได้ (กรณีตั้งค่า pointer-events ให้เปิดใช้งาน) อาจทำให้ผู้ใช้งานคลิกหรือโต้ตอบกับเนื้อหาที่ไม่เห็นได้ จึงควรตรวจสอบการตั้งค่าใน CSS ด้วยครับ ส่วนประโยชน์จาก OCR ในบทความนี้ยืนยันให้เห็นว่า การเข้าใจความแตกต่างระหว่างสองคำสั่งนี้เป็นเรื่องสำคัญสำหรับนักพัฒนาเว็บทั้งมือใหม่และมืออาชีพ เพื่อช่วยให้หน้าเว็บทำงานได้ตามที่ต้องการทั้งในแง่การแสดงผลและประสิทธิภาพ
.imgbox { float: left; text-align: center; width: 250px; border: 1px solid gray; margin: 4px; padding: 6px; } button { width: 100%; cursor: pointer; } Difference between(ความแตกต่างระหว่าง) display:none and visiblity: hidden visibility:hidden hides the element, but it still takes up space in the layout. (ซ่อนองค์ประกอบแต่ยังคงใช้พื้นที่ในเค้าโครง) display:none removes the element from the document. It does not take up any space. (ลบองค์ประกอบออกจากเอกสาร โดยไม่กินพื้นที่) display:none ลบออกไปเลย visibility:hidden ซ่อน เรียกคืนมา คลิ๊กเรียกคืนมาทั้งหมด function removeElement() { document.getElementById("imgbox1").style.display = "none"; } function changeVisibility() { document.getElementById("imgbox2").style.visibility = "hidden"; } function resetElement() { document.getElementById("imgbox1").style.display = "block"; document.getElementById("imgbox2").style.visibility = "visible"; }