javascript javascript中的“offsetLeft”和“clientLeft”有什么区别
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27199247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what is the difference between `offsetLeft` and 'clientLeft' in javascript
提问by Sanmveg saini
I read many answers on this website and on other sites on clientLeftand OffsetLeft. but none give comprehensive explanation of what those values are.
我读了这个网站和其他网站上的很多答案clientLeft和OffsetLeft。但没有人对这些值是什么给出全面的解释。
Also, there are several sources on the web giving confusing or incorrect information.
此外，网络上有几个来源提供了令人困惑或不正确的信息。
Can someone could give me correct explanation of these terms with an visual example?
and how could I change these values, without using any CSS. I mean using only JavaScript .
有人可以用一个直观的例子给我正确解释这些术语吗？
以及如何在不使用任何 CSS 的情况下更改这些值。我的意思是只使用 JavaScript 。
回答by Roko C. Buljan
offsetLeft= position left+marginfrom the first positioned parentleftedge.clientLeft= left border+ left scrollbar width(if present). (blocklevel elements -only!)
offsetLeft= position left+margin从第一个定位的父左边缘开始。clientLeft=左边框+左滚动条宽度（如果存在）。（block仅限关卡元素！）
Let's say we have a <div>with 8px border and a scrollbar
假设我们有一个<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>The interesting part
有趣的部分
Using Right-To-Lefttext-directiondirection: rtl;
the returned value will be: border + left scrollBarwidth (usually 17px).
使用从右到左的文本方向direction: rtl;
，返回的值将是：边框 + 左滚动条宽度（通常为 17 像素）。
8px border + 17px scrollbar* = ~25px
8px 边框 + 17px 滚动条* = ~25px
* (depends on browser default or custom styles)
*（取决于浏览器默认或自定义样式）
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>Resources:
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
资源：
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
回答by AIon
The above answer explains it well, but here is a nice picture taken form this wonderful tutorial on coordinates.
上面的答案很好地解释了它，但这里有一张漂亮的图片，来自这个关于坐标的精彩教程。
