js获取元素位置和大小的属性【offset | client | scroll】

俺把俺的学习笔记都以文章的形式分享出来啦，点开主页查看更多文章哦~

若有问题请留言或私信！

以下所有属性都没有单位且都是只读的

offset

1.  div.offsetWidth/Height    自身可视区宽高(包含内容、padding、边框 、滚动条)
2.  div.offsetLeft/Top            距离最近定位(相/绝)父元素边缘的距离，若没有则为相对于document的距离
3.  div.offsetParent              为最近定位父元素，若没有则为body

client

1.  div.clientWeight/Height   自身可视区宽高(包含内容、padding，不包含边框与滚动条)
2.  div.clientTop/Left             上/左边框大小

scroll 

1. div.scrollWidth/Height      自身整体宽高 （即超出父元素部分也算）（包含内容、padding，不包含边框与滚动条）
2. div.scrollTop/Left              向上/左滚动的距离。

window

1.      window.pageXoffset   页面滚动的距离
2.      window.innerWidth     文档可视区宽度(包括滚动条及边框)