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

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

ไวยากรณ์ (Syntax)

HTMLelement.offsetTop

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetTop</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-offsetTop</legend>
      <div id="containerDiv">
        <img id="image" src="https://www.tutorialspoint.com/compiler_design/images/compiler-design-mini-logo.jpg">
      </div>
      <input type="button" onclick="getHeight()" value="Get offsetTop">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var picForm = document.getElementById("picForm");
  var containerDiv = document.getElementById("containerDiv");
  function getHeight() {
    var style = window.getComputedStyle(picForm);
    var style2 = window.getComputedStyle(document.body);
    divDisplay.innerHTML = 'Top Offset of form: '+picForm.offsetTop+'px';
    divDisplay.innerHTML += '<br>Top position of Child(form): '+style.top;
    divDisplay.innerHTML += '<br>Top margin of Child(form): '+style.marginTop;
    divDisplay.innerHTML += '<br>Top padding of Parent(body): '+style2.paddingTop;
    divDisplay.innerHTML += '<br>Top border of Parent(body): '+style2.borderTopWidth;
    divDisplay.innerHTML += '<br>Top margin of Parent(body): '+style2.marginTop;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

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

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