javascript中的`offsetLeft`和'clientLeft'有啥区别

Posted 2023-03-05

【中文标题】javascript中的`offsetLeft`和\'clientLeft\'有啥区别

【英文标题】：what is the difference between `offsetLeft` and 'clientLeft' in javascriptjavascript中的`offsetLeft`和'clientLeft'有什么区别

【发布时间】：2015-01-27 17:42:48

【问题描述】：

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

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

有人可以通过视觉示例正确解释这些术语吗？ 以及如何在不使用任何 CSS 的情况下更改这些值。我的意思是只使用 javascript。

【参考方案1】：

offsetLeft = 位置left+margin 来自第一个定位的父级 left edge。clientLeft = 左边框 + 左滚动条宽度（如果存在）。 （block 级别元素 - 仅限！）

---

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

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; 返回值为：border + left scrollBar 宽度（通常为 17px）。

8px 边框 + 17px 滚动条* = ~25px

^{*（取决于浏览器默认或自定义样式）}

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.aspxhttps://developer.mozilla.org/en-US/docs/Web/API/Element.clientLefthttps://developer.mozilla.org/en-US/docs/Web/API/htmlElement.offsetLeft

【参考方案2】：

上面的答案很好地解释了它，但这是一张从this wonderful tutorial on coordinates 拍摄的漂亮照片。