ตัวอย่าง
ซ่อนเนื้อหาที่ <p> องค์ประกอบ:
document.getElementById("myP").style.visibility = "hidden"; ลองตัวเอง» ความหมายและการใช้งาน
ชุดคุณสมบัติการแสดงผลหรือผลตอบแทนไม่ว่าจะเป็นองค์ประกอบที่ควรจะมองเห็น
คุณสมบัติการแสดงผลที่ช่วยให้ผู้เขียนเพื่อแสดงหรือซ่อนองค์ประกอบ มันก็คล้าย ๆ กับ การแสดงผล คุณสมบัติ อย่างไรก็ตามความแตกต่างก็คือว่าถ้าคุณตั้งค่า display: none มันซ่อนองค์ประกอบทั้งในขณะที่การมองเห็น: ซ่อนหมายความว่าเนื้อหาขององค์ประกอบจะมองไม่เห็น แต่องค์ประกอบอยู่ในตำแหน่งเดิมและขนาด
สนับสนุนเบราว์เซอร์
คุณสมบัติการแสดงผลที่ได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด
วากยสัมพันธ์
กลับคุณสมบัติการแสดงผล:
object .style.visibility
ตั้งค่าคุณสมบัติการแสดงผล:
object .style.visibility="visible|hidden|collapse|initial|inherit"
ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| visible | องค์ประกอบที่สามารถมองเห็นได้ นี้จะเริ่มต้น |
| hidden | องค์ประกอบที่มองไม่เห็น แต่ก็ยังส่งผลกระทบต่อรูปแบบ |
| collapse | เมื่อนำมาใช้ในแถวของตารางหรือเซลล์องค์ประกอบที่มองไม่เห็น (same as "hidden") |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
รายละเอียดทางเทคนิค
| ราคาเริ่มต้น: | มองเห็นได้ |
|---|---|
| กลับค่า: | สตริงตัวแทนว่าเนื้อหาขององค์ประกอบจะปรากฏหรือไม่ |
| CSS รุ่น | CSS2 |
ตัวอย่างอื่น ๆ
ตัวอย่าง
ความแตกต่างระหว่างคุณสมบัติจอแสดงผลและคุณสมบัติการแสดงผล:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
} ลองตัวเอง» ตัวอย่าง
ซ่อนและแสดง <img> องค์ประกอบ:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
} ลองตัวเอง» ตัวอย่าง
กลับมองเห็นประเภทของ <p> องค์ประกอบ:
alert(document.getElementById("myP").style.visibility); ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: การแสดงผล CSS และการมองเห็น
อ้างอิง CSS: visibility property
<สไตล์วัตถุ