offset总结
| 属性 | 说明 | 注意 |
|---|---|---|
| offsetWidth | 获取对象自身的宽度 | 包括内容、边框和内边距，即：offsetWidth(Height)= width(Height)+ border + padding |
| offsetHeight | 获取对象自身的高度 | |
| offsetLeft | 距离第一个有定位的父级盒子左边距离 | offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离 |
| offsetTop | 距离第一个有定位的父级盒子上边距离 | |
| offsetParent | 返回当前对象的父级（带有定位）盒子 | 如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body； 如果当前元素的父级元素中有CSS定位（position：absolute或relative），offsetParent取最近的那个父级元素。和parentNode的区别，parentNode获取父节点 |
offsetParent与parentNode
\
offsetXXX 和 style.XXX的区别
(以offsetLeft和style.left为例分析)
- style.left 返回的是字符串，如10px，offsetLeft返回的是数值10。
- style.left可读可写，offsetLeft只读，因此如果想要改变div的位置，只能通过修改元素的style.left实现。
- style.left的值需要在html标签中进行定义【<div id="son" style="left:100px"> 内层盒子</div>】，才可以通过【son.style.left】获取到值。如果定义在css样式里，通过【son.style.left】获取到值为空。
- offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
- 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串
来源：CSDN
作者：maidu_xbd
链接：https://blog.csdn.net/maidu_xbd/article/details/104059831