คุณสมบัติ HTML DOM Style display

คุณสมบัติ HTML DOM Style display ใช้สำหรับตั้งค่าหรือส่งคืนประเภทการแสดงผลขององค์ประกอบ องค์ประกอบส่วนใหญ่เป็น block หรือ inline สามารถซ่อนองค์ประกอบได้ด้วย display: none

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ display:

object.style.display = value

ค่าของคุณสมบัติ (Property Values)

ค่า	คำอธิบาย
inline	แสดงองค์ประกอบเป็น inline element คุณสมบัติ width และ height จะไม่มีผล
block	แสดงองค์ประกอบแบบบล็อก เริ่มบรรทัดใหม่และใช้ความกว้างเต็มที่
contents	แสดงเฉพาะ child elements ทำให้ parent element หายไป และ child elements กลายเป็น direct children ของ DOM
flex	แสดงองค์ประกอบเป็น block-level flex container
grid	แสดงองค์ประกอบเป็น block-level grid container
inline-block	เหมือน inline แต่สามารถกำหนด width และ height ได้
inline-flex	แสดงองค์ประกอบเป็น inline-level flex container
inline-grid	แสดงองค์ประกอบเป็น inline-level grid container
inline-table	แสดงองค์ประกอบเป็น inline-level table
list-item	ทำให้องค์ประกอบทำงานเหมือน <li> element
run-in	แสดงองค์ประกอบเป็น block หรือ inline ขึ้นอยู่กับบริบท
table	ทำให้องค์ประกอบทำงานเหมือน <table> element
table-caption	ทำให้องค์ประกอบทำงานเหมือน <caption> element
table-column-group	ทำให้องค์ประกอบทำงานเหมือน <colgroup> element
table-header-group	ทำให้องค์ประกอบทำงานเหมือน <thead> element
table-footer-group	ทำให้องค์ประกอบทำงานเหมือน <tfoot> element
table-row-group	ทำให้องค์ประกอบทำงานเหมือน <tbody> element
table-cell	ทำให้องค์ประกอบทำงานเหมือน <td> element
table-column	ทำให้องค์ประกอบทำงานเหมือน <col> element
table-row	ทำให้องค์ประกอบทำงานเหมือน <tr> element
none	องค์ประกอบถูกลบออกโดยสิ้นเชิง
initial	ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น
inherit	สืบทอดค่าคุณสมบัติจากองค์ประกอบพาเรนต์

ตัวอย่างการใช้งาน

<!DOCTYPE html> <html> <head> <style> 
    #DIV1 { 
        padding: 10px; 
        background-color: lightblue; 
        display: flex; 
        flex-direction: row; 
    } 
    #flexSpan { 
        width: 70px; 
        background-color: red; 
        margin: 20px; 
        padding: 10px; 
    } 
</style> <script> 
    function changeDisplay() { 
        document.getElementById("DIV1").style.display = "block"; 
        document.getElementById("flexSpan").style.display = "block"; 
        document.getElementById("Sample").innerHTML = "การแสดงผลเปลี่ยนเป็น block สำหรับ div และ span ภายใน"; 
    } 
</script> </head> <body> 
    <div id="DIV1"> 
        <span id="flexSpan">WORLD1</span> 
        <span id="flexSpan">WORLD2</span> 
    </div> 
    <p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนคุณสมบัติ display ของ div และองค์ประกอบภายใน</p> 
    <button onclick="changeDisplay()">เปลี่ยน Display</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

คุณสมบัติ HTML DOM Style display

เมื่อคลิกปุ่ม "เปลี่ยน Display":

คุณสมบัติ HTML DOM Style display