Thuộc tính offsetTop trong HTML DOM

Thuộc tính offsetTop trong HTML DOM trả về một số tương ứng với vị trí trên cùng của phần tử được chỉ định so với cạnh trên của phần tử cha.

Cú pháp

HTMLelement.offsetTop

Giá trị trả về tương ứng với:

• Vị trí trên và margin của phần tử được chỉ định
• Padding trên, thanh cuộn, border và margin của phần tử cha

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính offsetTop:

<!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="Lấy 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 = 'Offset trên của form: ' + picForm.offsetTop + 'px';
      divDisplay.innerHTML += '<br>Vị trí trên của Con (form): ' + style.top;
      divDisplay.innerHTML += '<br>Margin trên của Con (form): ' + style.marginTop;
      divDisplay.innerHTML += '<br>Padding trên của Cha (body): ' + style2.paddingTop;
      divDisplay.innerHTML += '<br>Border trên của Cha (body): ' + style2.borderTopWidth;
      divDisplay.innerHTML += '<br>Margin trên của Cha (body): ' + style2.marginTop;
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn bất kỳ nút nào:

Sau khi nhấn nút 'Lấy offsetTop':