三大系列（offset、client、scroll）总结（相同点、不同点和他们的主要用法）

1、offset系列

 

2、client系列

 

3、scroll系列

 

 

1. offset Width和其他两种系列的最大差别：offset系列包括border。而其他两种不包含border。
2. clientWidth和scrollWidth的区别：scrollWidth包含文字超出部分的大小。

 

但最需要记住的是他们主要用法：

1. offset系列 经常用于获得元素位置    offsetLeft  offsetTop
2. client 经常用于获取元素大小  clientWidth  clientHeight
3. scroll 经常用于获取滚动距离  scrollTop  scrollLeft  
4. 注意页面滚动的距离通过 window.pageXOffset  、window.pageYOffset获得

 

参考：黑马程序员