คุณสมบัติชื่อ visibility ช่วยให้คุณซ่อนอีเลเมนต์จากการมองเห็น คุณสามารถใช้คุณสมบัตินี้ร่วมกับ JavaScript เพื่อสร้างเมนูซับซ้อนและเลย์เอาต์เว็บเพจที่ซับซ้อนได้
คุณสมบัติ visibility สามารถรับค่าตามตารางด้านล่างนี้:
| ค่า | คำอธิบาย |
|---|---|
| visible | กล่องและเนื้อหาถูกแสดงให้ผู้ใช้เห็น |
| hidden | กล่องและเนื้อหาถูกทำให้มองไม่เห็น แม้จะยังส่งผลต่อเลย์เอาต์ของหน้า |
| collapse | ใช้เฉพาะกับคอลัมน์และแถวตารางแบบไดนามิก |
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานกับค่า visible และ hidden:
<html> <head> <style> p { visibility: hidden; } </style> </head> <body> <p style = "visibility:visible;"> ย่อหน้านี้มองเห็นได้ </p> <p> ย่อหน้านี้จะไม่มองเห็นได้ </p> </body> </html>