前端的小玩意（13）——获取DOM的位置相关信息

Github的DEMO地址：

https://github.com/qq20004604/some_demo/tree/master/%E5%85%B3%E4%BA%8Eclient%E3%80%81offset%E3%80%81scroll%E7%9A%84%E8%AE%BE%E7%BD%AE

建议查看这个，阅读效果更好

（35）获取DOM的位置相关信息

引自：

http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html

 

前缀：

offset、client、scroll

 

后缀：

Width、Height、Left、Top

 

说明：

①clientWidth和clientHeight指盒模型内部的宽高，包含padding，不包含border（IE下包括，但可能看版本？）和margin，不包含滚动条；

 

②clientTop和clientLeft，指border的左边和上面高度；

 

③offsetLeft和offsetTop指border区域以外，距离页面左边和上面的距离（具体的说，假如窗口实际高度1000px，该元素的margin-top是150px，其父元素的margin-top是2225px，那么，offsetTop的值是2225，注意，2225覆盖了150的区域，所以150没有起效）

 

④offsetWidth和offsetHeight指包含border区域的盒模型大小（包含滚动条）；

 

⑤scrollWidth和scrollHeight是dom可滚动区域的宽和高（不包含border，包含滚动条）；最小值是dom的宽和高（带滚动条）；

 

⑥scrollTop和scrollLeft是dom当前滚动情况下，页面顶部距离实际顶部的高度和宽度。