css display nonoe
css display: none คือ คำสั่งใน CSS ที่ใช้ซ่อนองค์ประกอบ HTML อย่างสมบูรณ์ โดยองค์ประกอบนั้นจะถูกลบออกจากหน้าเว็บ ไม่ปรากฏให้เห็น และ ไม่กินพื้นที่บนเลย์เอาต์ อีกต่อไป ทำให้องค์ประกอบอื่นๆ ที่อยู่รอบข้างขยับเข้ามาแทนที่ ต่างจาก visibility: hidden ที่เพียงแค่ทำให้องค์ประกอบนั้นมองไม่เห็น แต่ยังคงกินพื้นที่เดิมบนหน้าเว็บ
ลักษณะการทำงานของ display: none
ซ่อนอย่างสมบูรณ์:
องค์ประกอบจะหายไปจากหน้าเว็บอย่างสิ้นเชิง เหมือนกับว่าไม่มีองค์ประกอบนั้นอยู่
ไม่กินพื้นที่:
พื้นที่ที่เคยใช้โดยองค์ประกอบนั้นจะยุบลง และองค์ประกอบอื่นๆ จะปรับตำแหน่งเข้ามาแทนที่
ไม่สามารถโต้ตอบได้:
องค์ประกอบที่ถูกซ่อนด้วย display: none จะไม่สามารถคลิกหรือโต้ตอบได้
ไม่เข้าถึงได้:
โปรแกรมอ่านหน้าจอและเครื่องมือค้นหาจะไม่สามารถเข้าถึงหรืออ่านข้อความในองค์ประกอบที่ถูกซ่อนด้วย display: none ได้
ลบออกจาก DOM:
องค์ประกอบนั้นจะถูกลบออกจากโครงสร้างเอกสาร (DOM) ชั่วคราว
ความแตกต่างกับ visibility: hidden
display: none: ซ่อนและลบองค์ประกอบออกจากเลย์เอาต์ (กินพื้นที่ว่าง)
visibility: hidden: ซ่อนองค์ประกอบแต่ยังคงรักษาพื้นที่ว่างที่องค์ประกอบนั้นเคยครอบครองอยู่
ตัวอย่างการใช้งาน
ใช้เมื่อต้องการซ่อนองค์ประกอบที่ไม่จำเป็นต้องใช้งานในขณะนั้น เช่น เมนูที่ไม่ใช้งานอยู่ หรือปุ่มที่แสดงตามเงื่อนไขบางอย่าง
เหมาะสำหรับการซ่อนเนื้อหาบางส่วนออกไปอย่างถาวร หรือเมื่อต้องการให้เลย์เอาต์ของหน้าเว็บเปลี่ยนแปลงไปตามการซ่อน/แสดงองค์ประกอบ
เวลาเจอคำว่า css display none หรือ display:none หลายคนมักใช้เพื่อ “ซ่อน” ของบนหน้าเว็บ แต่สิ่งที่ควรรู้เพิ่มคือมันมีผลกับทั้งเลย์เอาต์ การคลิก และการเข้าถึง (accessibility) ด้วย จากที่ลองทำหน้าเว็บแบบปุ่มคลิกเพื่อให้เอกสาร/รูป “หายไป” (แนว ๆ คลิ๊กเพื่อให้หน้าเอกสารหายไป โดยใช้ display:none) จะเห็นพฤติกรรมชัดมากว่าเมื่อซ่อนแล้ว ส่วนอื่นจะขยับมาแทนทันที เพราะมันไม่กินพื้นที่เลย 1) display: none เหมาะใช้ตอนไหน - ซ่อน/แสดงเมนูมือถือ (hamburger menu) ที่ต้องการให้หน้าเว็บยุบพื้นที่กลับมาเมื่อปิดเมนู - ซ่อนปุ่มหรือข้อความตามเงื่อนไข เช่น ผู้ใช้ยังไม่กรอกข้อมูลครบก็ไม่ให้แสดงปุ่มส่ง - ซ่อนส่วนที่ไม่จำเป็นในบางโหมด เช่น โหมดพิมพ์ (print) หรือโหมดอ่านสบายตา 2) จุดต่างที่มักพลาด: display:none vs visibility:hidden - display:none = หายจากหน้า + ไม่เหลือช่องว่าง + คลิกไม่ได้ - visibility:hidden = มองไม่เห็นแต่ “ยังจองพื้นที่” ทำให้มีช่องว่างแปลก ๆ อยู่ ถ้าคุณซ่อนรูป/การ์ดแล้วอยากให้การ์ดอื่นเรียงชิดขึ้นมา ให้เลือก display:none แต่ถ้าต้องการคงโครงร่างเดิมไว้ (กันหน้าเว็บกระพริบ/ยุบ) ค่อยใช้ visibility:hidden 3) ตัวอย่างแนวทางทำปุ่มคลิกซ่อน/โชว์ (ไอเดีย) - เริ่มต้นใส่ class ที่ซ่อนไว้: .is-hidden { display: none; } - แล้วใช้ JavaScript สลับ class เวลากดปุ่ม (toggle) ทริคเล็ก ๆ จากประสบการณ์: ตอนสลับให้แสดงกลับมา อย่าลืมว่าบาง element ไม่ได้ควรเป็น block เสมอ เช่น span ควรเป็น inline ดังนั้นการ “เอา display:none ออก” ด้วยการลบ class จะปลอดภัยกว่าการไป set display:block ทับแบบตายตัว 4) เรื่องการเข้าถึง (สำคัญกับผู้ใช้จริง) เนื้อหาที่ถูก display:none จะไม่ถูกอ่านโดยโปรแกรมอ่านหน้าจอในหลายกรณี ดังนั้นถ้าคุณซ่อนข้อมูลสำคัญ เช่น ข้อความแจ้งเตือน ให้คิดเพิ่มว่าควรใช้วิธีอื่นหรือเพิ่ม aria-* ช่วย เพื่อให้ผู้ใช้ทุกกลุ่มใช้งานได้ 5) ทริคสำหรับ debug เวลามัน “หายไป” แบบงง ๆ ถ้า element ไม่แสดง ให้เปิด DevTools แล้วเช็กว่าโดน rule ไหนสั่ง display:none อยู่หรือไม่ (บางทีโดนสืบทอดจาก class/เงื่อนไข responsive) และลองปิด/เปิด rule ในแท็บ Styles จะเจอสาเหตุไวขึ้น สรุปคือ display:none เป็นเครื่องมือที่แรงและชัด—ซ่อนแล้วหายจริง ไม่กินพื้นที่ เหมาะกับ UI ที่ต้องยุบพื้นที่ แต่ถ้าต้องคงช่องว่างหรือมีเหตุผลด้านการเข้าถึง อาจต้องพิจารณา visibility:hidden หรือเทคนิคอื่นร่วมด้วย
🥰