Question

以下是我正在测试的代码。

＆＃13;

function myFunction() {
  var testDiv = document.getElementById("test");
  document.getElementById("demo").innerHTML = testDiv.offsetLeft;
}
function myFunction2() {
  var testDiv = document.getElementById("test2");
  document.getElementById("demo2").innerHTML = testDiv.offsetLeft;
}

＆＃13;

#test, #test2 {
  left: 100px;
  margin: 10px;
  padding: 10px;
  width: 300px;
  position: relative;
  border: 5px solid black
}
body {
  padding: 15px;
  margin: 0;
  border: 2px solid transparent;
}

＆＃13;

<div style="padding-left: 30px; border: 1px solid red;">
  <div id="test">
    <p>
      <button onclick="myFunction()">Try it</button>
    </p>
    <p>offsetLeft is: <span id="demo"></span>
    </p>
  </div>
</div>
<div style="padding-left: 30px; border: 1px solid red; position: relative;">
  <div id="test2">
    <p>
      <button onclick="myFunction2()">Try it</button>
    </p>
    <p>offsetLeft is: <span id="demo2"></span>
    </p>
  </div>
</div>

＆＃13;

此offsetLeft值计为158px，或在其中添加正文2px边框宽度。

但是，如果我将position属性应用于div的父div#test，则offsetValue计为140px，或不< / strong>添加父div的1px边框宽度。

为什么会这样，有人可以解释一下吗？

offsetLeft值在更改offsetParent时不包括border-left-width

0 个答案: