我在该网站以及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