คุณสมบัติ offsetLeft ของ HTML DOM

คุณสมบัติ offsetLeft ของ HTML DOM ส่งคืน ตัวเลข (หน่วยเป็นพิกเซล/px) ที่แสดงตำแหน่งด้านซ้าย (left position) ขององค์ประกอบที่ระบุ เทียบกับด้านซ้ายขององค์ประกอบพาเรนต์ (parent element)

ไวยากรณ์ (Syntax)

HTMLelement.offsetLeft

ค่าที่ส่งคืนประกอบด้วย

• ตำแหน่งด้านซ้ายและ margin ขององค์ประกอบที่ระบุ (child)
• padding ด้านซ้าย, scrollbar, border และ margin ขององค์ประกอบพาเรนต์ (parent)

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

ตัวอย่างนี้แสดงการคำนวณ offsetLeft ของฟอร์ม และแยกแสดงค่าต่างๆ ที่เกี่ยวข้องโดยใช้ window.getComputedStyle()

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetLeft</title>
<style type="text/css">
  #picForm { width:70%; margin: 0 auto; text-align: center; }
  input[type="button"] { border-radius: 10px; }
  #containerDiv { margin: 0 auto; }
</style>
</head>
<body>
  <form id="picForm">
    <fieldset>
      <legend>HTML-DOM-offsetLeft</legend>
      <div id="containerDiv">
        <img id="image" src="https://www.tutorialspoint.com/ios/images/ios-mini-logo.jpg">
      </div>
      <input type="button" onclick="getLeft()" value="Get offsetLeft">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var picForm = document.getElementById("picForm");
  var containerDiv = document.getElementById("containerDiv");
  function getLeft() {
    var style = window.getComputedStyle(picForm);
    var style2 = window.getComputedStyle(document.body);
    divDisplay.innerHTML = 'Left Offset of form: '+picForm.offsetLeft+'px';
    divDisplay.innerHTML += '<br>Left position of Child(form): '+style.left;
    divDisplay.innerHTML += '<br>Left margin of Child(form): '+style.marginLeft;
    divDisplay.innerHTML += '<br>Left padding of Parent(body): '+style2.paddingLeft;
    divDisplay.innerHTML += '<br>Left border of Parent(body): '+style2.borderLeftWidth;
    divDisplay.innerHTML += '<br>Left margin of Parent(body): '+style2.marginLeft;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนกดปุ่มใดๆ:

หลังกดปุ่ม "Get offsetLeft":