【CSS】วิธีพื้นฐานในการซ่อนองค์ประกอบ｜การใช้ .d-none
คู่มือนี้อธิบายวิธีการใช้ display: none; ในการซ่อนองค์ประกอบ HTML อย่างง่ายดาย โดยไม่ต้องลบองค์ประกอบจากโครงสร้าง HTML
🔹 โค้ดบางส่วน
<div class="d-none">
องค์ประกอบนี้จะถูกซ่อน
</div>
<style>
.d-none {
display: none;
}
</style>
💻 โค้ดที่ทำงานได้สมบูรณ์ (คัดลอกโค้ดนี้และสามารถใช้งานใน HTML ได้ทันที)
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>ตัวอย่างการซ่อน</title>
<style>
.d-none {
display: none;
}
</style>
</head>
<body>
<div class="d-none">
องค์ประกอบนี้จะถูกซ่อน
</div>
</body>
</html>
🧩 การประยุกต์ใช้งานและวิธีการใช้
display: none; เป็นวิธีพื้นฐานที่สุดในการซ่อนองค์ประกอบจากหน้าจอของผู้ใช้ โดยปกติแล้วจะใช้ใน UI ที่มีการทำงานตามเงื่อนไข เนื่องจากสามารถสลับได้ง่ายด้วย JavaScript หรือ CSS
ในกรอบงานเช่น Bootstrap คลาส .d-none จะถูกใช้เป็นคลาสมาตรฐาน และสามารถสลับการแสดงผลแบบตอบสนอง (responsive) ได้ เช่น .d-md-none
🎯 ข้อสังเกตเพิ่มเติมเกี่ยวกับเทคนิคการซ่อน
การใช้ display: none; ทำให้คุณสามารถซ่อนองค์ประกอบได้โดยไม่ต้องลบออกจากโครงสร้าง HTML ซึ่งเป็นประโยชน์ในกรณีที่ต้องการแสดงหรือซ่อนองค์ประกอบตามการกระทำของผู้ใช้ หรือเงื่อนไขต่าง ๆ โดยใช้ JavaScript
อย่างไรก็ตาม การใช้วิธีนี้จะทำให้อนุญาตให้มองไม่เห็นองค์ประกอบนั้นได้เช่นเดียวกับว่า "ไม่มีอยู่" ดังนั้นตัวอย่างเช่น เมื่อใช้แบบฟอร์มซ่อนอยู่ จะไม่สามารถเน้นฟอร์มที่ซ่อนได้
ในทางตรงกันข้าม visibility: hidden; จะซ่อนองค์ประกอบแต่ยังคงพื้นที่ของมันไว้ เมื่อคุณต้องการซ่อนองค์ประกอบทั้งหมดอย่างสมบูรณ์ให้ใช้ display: none; และเมื่อคุณต้องการรักษาเลย์เอาต์แต่ซ่อนเนื้อหาก็สามารถใช้ visibility: hidden; ได้
หากคุณต้องการซ่อนองค์ประกอบเฉพาะบนมือถือ ใช้ Media Queries เช่น @media (max-width: 768px) { .d-none-mobile { display: none; } } ซึ่งจะช่วยให้คุณสามารถปรับแสดงหรือซ่อนตามขนาดหน้าจอและเงื่อนไขต่าง ๆ ได้อย่างยืดหยุ่น