คุณสมบัติ HTML DOM Style height ใช้สำหรับตั้งค่าหรือส่งคืนความสูงขององค์ประกอบ
ไวยากรณ์ (Syntax)
การตั้งค่าคุณสมบัติ height:
object.style.height = "auto|length|%|initial|inherit"
ค่าของคุณสมบัติ (Property Values)
| ค่า | คำอธิบาย |
|---|---|
| auto | ค่าเริ่มต้น ความสูงถูกกำหนดโดยเบราว์เซอร์ |
| length | กำหนดความสูงของเบราว์เซอร์ด้วยหน่วยความยาว |
| % | ตั้งค่าความสูงของ child element เป็นเปอร์เซ็นต์สัมพัทธ์กับ parent element |
| initial | ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น |
| inherit | สืบทอดค่าคุณสมบัติจากองค์ประกอบพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html> <html> <head> <style>
#demo1 {
width: 100px;
height: 100px;
background-color: lightpink;
}
#demo2 {
margin-top: 4px;
width: 100px;
height: 100px;
background-color: coral;
}
</style> <script>
function changeHeight() {
document.getElementById("demo1").style.height = "200px";
document.getElementById("Sample").innerHTML = "ความสูงของ div แรกเพิ่มขึ้น 100px";
}
</script> </head> <body>
<div id="demo1">DIV1</div>
<div id="demo2">DIV2</div>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนความสูงของ div ด้านบน</p>
<button onclick="changeHeight()">เปลี่ยนความสูง</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม "เปลี่ยนความสูง":
