javascript - javascript中 `offsetLeft`和 'clientLeft'有什么区别

我在该网站以及clientLeft和OffsetLeft的其他网站上阅读了很多答案。但没有人能全面解释这些值是什么。

另外，网络上有多个来源提供令人困惑或不正确的信息。

有人可以通过一个直观的例子给我这些术语的正确解释吗？
以及如何在不使用任何CSS的情况下更改这些值。我的意思是只使用JavaScript。

最佳答案

offsetLeft =从第一个定位的父left edge开始的位置left + margin。clientLeft = 左边框 + 左滚动条宽度(如果存在)。 (block级元素-仅!)



假设我们有一个8px边框的<div>和一个滚动条

var el = document.getElementById("test");
console.log( el.offsetLeft );  // (left + margin)           80 + 10 = 90
console.log( el.clientLeft );  // (border + left scrollbar)  8 +  0 = 8

#test {
  overflow: auto;
  position: absolute;

  left:         80px; /* + */
  margin-left:  10px; /* = 90px offsetLeft */

  height:  100px;
  width:   100px;

  border: 8px solid red;
  background: #f8f8f8;
}

<div id="test">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>

有趣的部分

从右到左使用文字方向direction: rtl;返回的值将是:边框+左滚动条宽度(通常为17px)。



*(取决于浏览器的默认样式或自定义样式)

var el = document.getElementById("test");
console.log( el.offsetLeft );  // (left + margin)            80 +  10 = 90
console.log( el.clientLeft );  // (border + left scrollbar*)  8 + ~17 = 25

#test {
  overflow: auto;
  position: absolute;

  left:         80px; /* + */
  margin-left:  10px; /* = 90px offsetLeft */

  height:  100px;
  width:   100px;

  border: 8px solid red;
  background: #f8f8f8;

  direction: rtl;   /* now text is `rtl` and scrollbar is at the left side! */

}

<div id="test">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>

资源:
http://msdn.microsoft.com/en-us/library/ie/ms533564%28v=vs.85%29.aspx
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientLeft
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetLeft