css + js动画遇到的问题

Question

需求：设置一个盒子，向右移动 10px 。下面这段代码没有设置 margin-left，js代码把盒子向右移动50px距离

<style>
* {
      margin: 0;
      padding: 0;
  }

 div {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
  }
    
</style>

<div></div>
<script>
  var div = document.querySelector('div');
  for (var i=0; i<5; i++) {
        div.style.left = div.offsetLeft + 10 + "px";
  }
</script>

假如设置 margin-left 为10，每次向右移动的距离是 10px + margin-left ，单次右移 20px ，一共右移100px。
为什么 div.style.left = div.offsetLeft + 10 + "px"向右移动的距离，设置 margin-left 后，不是 10px，而是20px？

Answer 1

设置了margin-left:10px，offsetLeft 这里的话是相对于body左边缘距离，其实就是left+margin-left。
i = 0，div.offsetLeft = 10，div.offsetLeft + 10 + "px" = 20px;注意这个20是赋给left的；
i = 1, div.offsetLeft = 30，div.offsetLeft + 10 + "px" = 40px;
i = 2, div.offsetLeft = 50，div.offsetLeft + 10 + "px" = 60px;
i = 3, div.offsetLeft = 70，div.offsetLeft + 10 + "px" = 80px;
i = 4, div.offsetLeft = 90，div.offsetLeft + 10 + "px" = 100px;