คุณสมบัติการแสดงผล HTML DOM Style ใช้สำหรับการตั้งค่าหรือส่งคืนประเภทการแสดงผลขององค์ประกอบ องค์ประกอบส่วนใหญ่เป็นบล็อกหรืออินไลน์ คุณยังสามารถซ่อนองค์ประกอบโดยใช้ display:none
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติการแสดงผล -
object.style.display = value
ค่าคุณสมบัติข้างต้นมีคำอธิบายดังนี้ −
| ค่า | คำอธิบาย | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| inline | การแสดงองค์ประกอบเป็นองค์ประกอบแบบอินไลน์ เช่น คุณสมบัติความกว้างและความสูงจะไม่มีผลใดๆ | |||||||||||||||||||||||
| บล็อก | องค์ประกอบบล็อกจะแสดงขึ้นบรรทัดใหม่และใช้ความกว้างทั้งหมด | |||||||||||||||||||||||
| เนื้อหา | แสดงเฉพาะองค์ประกอบย่อยและทำให้องค์ประกอบหลักหายไป ทำให้เด็กเป็นผู้ดูแลเด็กของ DOM | |||||||||||||||||||||||
| flex | แสดงองค์ประกอบเป็นคอนเทนเนอร์แบบยืดหยุ่นระดับบล็อก | |||||||||||||||||||||||
| grid | แสดงองค์ประกอบเป็นคอนเทนเนอร์กริดระดับบล็อก | |||||||||||||||||||||||
| inline-block | Sameas inline แต่ตอนนี้ คุณสามารถใช้ค่า width และ height | |||||||||||||||||||||||
| inline-flex | แสดงองค์ประกอบเป็นคอนเทนเนอร์ flex ระดับอินไลน์ | |||||||||||||||||||||||
| inline-grid | แสดงองค์ประกอบเป็นคอนเทนเนอร์กริดระดับอินไลน์ | |||||||||||||||||||||||
| inline-table | องค์ประกอบจะแสดงเป็นตารางระดับอินไลน์ | |||||||||||||||||||||||
| list-item | ให้องค์ประกอบทำตัวเหมือน | |||||||||||||||||||||||
| รันอิน | แสดงองค์ประกอบเป็นบล็อกหรืออินไลน์ ขึ้นอยู่กับบริบท | |||||||||||||||||||||||
| ตาราง | ให้องค์ประกอบทำตัวเหมือน
เรามาดูตัวอย่างคุณสมบัติการแสดงผลกัน − ตัวอย่าง<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding:10px;
background-color:lightblue;
display:flex;
flex-direction:right;
}
#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="The display is now changed to block for both the div and its inner Span elements";
}
</script>
</head>
<body>
<div id="DIV1">
<span id="flexSpan">WORLD1</span>
<span id="flexSpan">WORLD2</span>
</div>
<p>Change the display property of the above div and its inner elements by clicking the below button</p>
<button onclick="changeDisplay()">Change Display</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยนการแสดงผล ” −
|
