คุณสมบัติ HTML DOM Style left ใช้สำหรับตั้งค่าหรือส่งคืนตำแหน่งซ้ายของ positioned element หากต้องการจัดตำแหน่งองค์ประกอบ ต้องตั้งค่าคุณสมบัติ position เป็น relative, absolute หรือ fixed
ไวยากรณ์ (Syntax)
การตั้งค่าคุณสมบัติ left:
object.style.left = "auto|length|%|initial|inherit"
ค่าของคุณสมบัติ (Property Values)
| ค่า | คำอธิบาย |
|---|---|
| auto | ตำแหน่งเริ่มต้น ให้เบราว์เซอร์กำหนดตำแหน่งซ้าย |
| length | กำหนดตำแหน่งซ้ายด้วยหน่วยความยาว อนุญาตค่าลบได้ |
| % | ตั้งค่าตำแหน่งซ้ายของ child เป็น % สัมพัทธ์กับความกว้างของ parent element |
| initial | ตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น |
| inherit | สืบทอดค่าคุณสมบัติจากองค์ประกอบพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html> <html> <head> <style>
#DIV1 {
margin-top: 70px;
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
</style> <script>
var setLeft = 50;
function changeLeft() {
document.getElementById("DIV1").style.left = setLeft + "px";
setLeft += 50;
}
</script> </head>
<h1>Left property example</h1>
<body>
<div id="DIV1"></div>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนตำแหน่งซ้ายของ div ด้านล่าง</p>
<button type="button" id="myBtn" onclick="changeLeft()">Left Position</button>
</body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม "Left Position" กล่องจะเคลื่อนที่ไปทางขวา 50 px ทุกครั้ง:
