Style display Property

ตัวอย่าง

ตั้ง <div> องค์ประกอบที่จะไม่แสดง:

document.getElementById("myDIV").style.display = "none";

ความหมายและการใช้งาน

ชุดคุณสมบัติการแสดงผลหรือผลตอบแทนประเภทการแสดงผลขององค์ประกอบ

องค์ประกอบใน HTML เป็นส่วนใหญ่ "inline" หรือ "block" องค์ประกอบ: องค์ประกอบแบบอินไลน์ได้ลอยเนื้อหาบนด้านซ้ายและขวาของมัน องค์ประกอบบล็อกเติมทั้งเส้นและไม่มีอะไรที่สามารถแสดงบนด้านซ้ายหรือขวา

คุณสมบัติการแสดงผลนี้ยังช่วยให้ผู้เขียนเพื่อแสดงหรือซ่อนองค์ประกอบ มันก็คล้าย ๆ กับ การมองเห็น สถานที่ให้บริการ แต่ถ้าคุณตั้ง display: none มันซ่อนองค์ประกอบทั้งในขณะที่การมองเห็น: ซ่อนหมายความว่าเนื้อหาขององค์ประกอบจะมองไม่เห็น แต่องค์ประกอบอยู่ในตำแหน่งเดิมและขนาด

Tip: ถ้าองค์ประกอบเป็นองค์ประกอบบล็อกประเภทการแสดงผลของมันยังสามารถเปลี่ยนแปลงได้ด้วยคุณสมบัติลอย

สนับสนุนเบราว์เซอร์

คุณสมบัติการแสดงผลที่ได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด

วากยสัมพันธ์

กลับคุณสมบัติการแสดงผล:

object .style.display

ตั้งค่าคุณสมบัติการแสดงผล:

object .style.display= ค่าทรัพย์สิน

ความคุ้มค่า	ลักษณะ
block	องค์ประกอบที่มีการแสดงเป็นองค์ประกอบระดับบล็อก
compact	องค์ประกอบที่จะแสดงผลเป็นระดับบล็อกหรือองค์ประกอบแบบอินไลน์ ขึ้นอยู่กับบริบท
flex	องค์ประกอบที่จะแสดงผลเป็นระดับบล็อกกล่องดิ้น ใหม่ใน CSS3
inherit	มูลค่าของทรัพย์สินที่จอแสดงผลจะรับมาจากองค์ประกอบหลัก
inline	องค์ประกอบที่มีการแสดงเป็นองค์ประกอบแบบอินไลน์ นี้จะเริ่มต้น
inline-block	องค์ประกอบที่มีการแสดงเป็นกล่องบล็อกภายในกล่องแบบอินไลน์
inline-flex	องค์ประกอบที่จะแสดงผลเป็นแบบอินไลน์ระดับกล่องดิ้น ใหม่ใน CSS3
inline-table	องค์ประกอบที่มีการแสดงเป็นตารางแบบอินไลน์ (เช่น <table>) โดยไม่มีการแบ่งสายก่อนหรือหลังโต๊ะ
list-item	องค์ประกอบที่มีการแสดงเป็นรายการ
marker	ค่าชุดนี้เนื้อหาก่อนหรือหลังกล่องจะเป็นเครื่องหมาย (ใช้กับ: ก่อนและ. หลังจากที่หลอกองค์ประกอบมิฉะนั้นค่านี้เป็นเหมือน "อินไลน์")
none	องค์ประกอบที่จะไม่ปรากฏ
run-in	องค์ประกอบที่จะแสดงผลเป็นระดับบล็อกหรือองค์ประกอบแบบอินไลน์ ขึ้นอยู่กับบริบท
table	องค์ประกอบที่มีการแสดงเป็นตารางบล็อก (เช่น <table>) ด้วยการแบ่งสายก่อนและหลังโต๊ะ
table-caption	องค์ประกอบที่มีการแสดงเป็นคำอธิบายตาราง (เช่น <คำบรรยายใต้ภาพ>)
table-cell	องค์ประกอบที่มีการแสดงเป็นเซลล์ตาราง (เช่น <td> และ <TH>)
table-column	องค์ประกอบที่มีการแสดงเป็นคอลัมน์ของเซลล์ (like <col>)
table-column-group	องค์ประกอบที่จะแสดงผลเป็นกลุ่มหนึ่งหรือมากกว่าหนึ่งคอลัมน์ (like <colgroup>)
table-footer-group	องค์ประกอบที่มีการแสดงเป็นแถวของตารางส่วนท้าย (like <tfoot>)
table-header-group	องค์ประกอบที่มีการแสดงเป็นแถวส่วนหัวตาราง (like <thead>)
table-row	องค์ประกอบที่มีการแสดงเป็นแถวของตาราง (เช่น <tr>)
table-row-group	องค์ประกอบที่จะแสดงผลเป็นกลุ่มหนึ่งหรือมากกว่าหนึ่งแถว (like <tbody>)
initial	ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น
inherit	สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก

รายละเอียดทางเทคนิค

ราคาเริ่มต้น:	แบบอินไลน์
กลับค่า:	สตริงที่เป็นตัวแทนของประเภทการแสดงผลขององค์ประกอบ
CSS รุ่น	CSS1

ตัวอย่างอื่น ๆ

ตัวอย่าง

ความแตกต่างระหว่างคุณสมบัติจอแสดงผลและคุณสมบัติการแสดงผล:

function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}

function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}

ลองตัวเอง»

ตัวอย่าง

ความแตกต่างระหว่าง "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;
}

ลองตัวเอง»