ลักษณะ การ แสดงคุณสมบัติ
ตัวอย่าง
ตั้งค่า <div> องค์ประกอบที่จะไม่แสดง:
document.getElementById("myDIV").style.display = "none";
ความหมายและการใช้งาน
คุณสมบัติการแสดงผลตั้งค่าหรือส่งคืนประเภทการแสดงผลขององค์ประกอบ
องค์ประกอบใน HTML ส่วนใหญ่เป็นองค์ประกอบ "อินไลน์" หรือ "บล็อก": องค์ประกอบแบบอินไลน์มีเนื้อหาลอยอยู่ทางด้านซ้ายและด้านขวา องค์ประกอบบล็อกจะเต็มบรรทัด และไม่สามารถแสดงสิ่งใดทางด้านซ้ายหรือขวาได้
คุณสมบัติ display ยังช่วยให้ผู้เขียนแสดงหรือซ่อนองค์ประกอบได้ คล้ายกับคุณสมบัติการมองเห็น อย่างไรก็ตาม หากคุณตั้งค่าdisplay:noneมันจะซ่อนองค์ประกอบทั้งหมด ในขณะที่visibility:hiddenหมายความว่าเนื้อหาขององค์ประกอบนั้นจะไม่ปรากฏให้เห็น แต่องค์ประกอบนั้นยังคงอยู่ในตำแหน่งและขนาดดั้งเดิม
เคล็ดลับ:หากองค์ประกอบเป็นองค์ประกอบบล็อก สามารถเปลี่ยนประเภทการแสดงผลได้ด้วยคุณสมบัติ float
รองรับเบราว์เซอร์
| Property | |||||
|---|---|---|---|---|---|
| display | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
คืนคุณสมบัติการแสดงผล:
object.style.display
ตั้งค่าคุณสมบัติการแสดงผล:
object.style.display = value
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| block | Element is rendered as a block-level element |
| compact | Element is rendered as a block-level or inline element. Depends on context |
| flex | Element is rendered as a block-level flex box. New in CSS3 |
| inline | Element is rendered as an inline element. This is default |
| inline-block | Element is rendered as a block box inside an inline box |
| inline-flex | Element is rendered as a inline-level flex box. New in CSS3 |
| inline-table | Element is rendered as an inline table (like <table>), with no line break before or after the table |
| list-item | Element is rendered as a list |
| marker | This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline") |
| none | Element will not be displayed |
| run-in | Element is rendered as block-level or inline element. Depends on context |
| table | Element is rendered as a block table (like <table>), with a line break before and after the table |
| table-caption | Element is rendered as a table caption (like <caption>) |
| table-cell | Element is rendered as a table cell (like <td> and <th>) |
| table-column | Element is rendered as a column of cells (like <col>) |
| table-column-group | Element is rendered as a group of one or more columns (like <colgroup>) |
| table-footer-group | Element is rendered as a table footer row (like <tfoot>) |
| table-header-group | Element is rendered as a table header row (like <thead>) |
| table-row | Element is rendered as a table row (like <tr>) |
| table-row-group | Element is rendered as a group of one or more rows (like <tbody>) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
| ค่าเริ่มต้น: | อินไลน์ |
|---|---|
| คืนมูลค่า: | สตริงที่แสดงถึงประเภทการแสดงผลขององค์ประกอบ |
| เวอร์ชัน CSS | CSS1 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ความแตกต่างระหว่างคุณสมบัติการแสดงผลและคุณสมบัติการมองเห็น:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
ตัวอย่าง
สลับระหว่างการซ่อนและแสดงองค์ประกอบ:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
ตัวอย่าง
ความแตกต่างระหว่าง "inline", "block" และ "none":
function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
ตัวอย่าง
ส่งคืนประเภทการแสดงผลของ <p> องค์ประกอบ:
alert(document.getElementById("myP").style.display);
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: การแสดงผล CSS และการมองเห็น
การอ้างอิง CSS: แสดงคุณสมบัติ
❮ สไตล์วัตถุ