js的offset、client、scroll三大系列

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44253336/article/details/100490470

1.offset系列——用来获取元素的宽，高，left，top，offsetParent。

它的值包括父级元素margin+父级元素padding+父级元素border+自己的margin
在style标签中设置的样式属性获取不到
style 属性 中设置的样式属性是可以获取到的

1.1 offsetLeft：元素距离左边位置的值

1.2 offsetTop: 元素距离上面位置的值

1.3 offsetWidth : 获取元素的宽度（有边框）

1.4 offsetHeight:获取元素的高度（有边框）

1.5 offsetParent: 返回这个元素的父级元素

2.scroll系列——滚动，卷曲，一般讨论的是网页整体与浏览器之间的关系。

2.1 scrollLeft ： 元素向左卷曲出去的距离

2.2 scrollTop: 元素向上卷曲出去的距离

2.3 scrollWidth: 元素中内容的实际宽度（没有边框）。如果没有内容，或者内容很少，那么值就是元素的宽度。

2.4 scrollHeight: 元素中内容的实际高度（没有边框）。如果没有内容，或者内容很少，那么值就是元素的高度。

3.client系列——可视区域

3.1clientWidth:可视区域的宽度,没有边框

3.2clientHeight:可视区域的高度,没有边框

3.3clientLeft:可以看成是左边框的宽度

3.4clientTop:可以看成是上边框的宽度

3.5clientX:可视区域的横坐标

3.6clientY:可视区域的纵坐标