Thuộc tính offsetLeft trong HTML DOM

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

Cú pháp

HTMLelement.offsetLeft

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

• Vị trí trái và margin của phần tử được chỉ định
• Padding trái, 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 offsetLeft:

<!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="Lấy 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 = 'Offset trái của form: ' + picForm.offsetLeft + 'px';
      divDisplay.innerHTML += '<br>Vị trí trái của Con (form): ' + style.left;
      divDisplay.innerHTML += '<br>Margin trái của Con (form): ' + style.marginLeft;
      divDisplay.innerHTML += '<br>Padding trái của Cha (body): ' + style2.paddingLeft;
      divDisplay.innerHTML += '<br>Border trái của Cha (body): ' + style2.borderLeftWidth;
      divDisplay.innerHTML += '<br>Margin trái của Cha (body): ' + style2.marginLeft;
    }
  </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 offsetLeft':