“offsetLeft”和'之间有什么区别；clientLeft'；在javascript中

我在这个网站上以及

clientLeft

和

OffsetLeft

上的其他网站上读到了很多答案。但没有人能全面解释这些价值观是什么

此外，网上还有一些来源提供了令人困惑或不正确的信息

有人能给我一个直观的例子来正确解释这些术语吗

---

我如何在不使用任何CSS的情况下更改这些值。我的意思是只使用JavaScript。

offsetLeft

=position

left

+

margin

来自第一个定位的父级。

clientLeft

=左边框+左滚动条宽度（如果存在）。（

block

level元素-仅限！）

---

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

var el=document.getElementById（“测试”）；
console.log（el.offsetLeft）；//（左+边距）80+10=90
console.log（el.clientLeft）；//（边框+左滚动条）8+0=8

#测试{
溢出：自动；
位置：绝对位置；
左：80px；/*+*/
左边距：10px；/*=90px偏移左边距*/
高度：100px；
宽度：100px；
边框：8px实心红色；
背景：#f8f8；
}

a
a
a
a
a
a
a
a
a

上面的答案很好地解释了这一点，但这里有一张很好的照片。