随笔：offset、client、scroll的小总结

为什么80%的码农都做不了架构师？>>>   

这段日子看到scrollTop,突然想起了这三个小兄弟，于是看了很多文章，但发现总结的各有优缺和对错，于是决定自己总结一下，仅当随笔。有错误的欢迎指正。

这些属性均是用于获取页面元素在网页中的位置或相对位置，这里又可以简单的分为两类用途：

           1.获取页面固定元素的位置；2.获取鼠标点击位置

先从页面固定元素的位置说起，用法均是  element.属性名  ：

       1.首先还是来说说offset家族吧（offsetWidth、offsetHeight、offsetLeft和offsetTop）

offsetWidth是指元素的宽度（包括元素的边框），或者说元素水平方向上占用的空间大小。

offsetHeight是指元素的高度（包括元素的边框），或者说元素垂直方向上占用的空间大小。

offsetLeft:元素左外边框到  上层元素或左侧元素  之间的距离

offsetTop:元素上外边框到  上层元素或左侧元素  之间的距离

         width和height很好理解，只需注意他是包含边框宽度的；

         关键在于Left和Top很可能有坑会出现，其实目前发现写也就两种情况：

                    1.对于普通元素。就是距离其左侧最近的兄弟元素或父元素的距离

                    2.对于position:absolute 等脱离文档流的，就要看其left和top属性了

        2.client家族 （clientWidth、clientHeight、clientLeft和clientTop）

              了解了offset，其实client很简单。

              clientWidth和clientHeight是不含边框厚度的宽高

              clientLeft和ClientTop则能获取到边框的厚度

         3.scroll家族（scrollTop、scrollLeft、scrollWidth和scrollHeight）

             正如offset和client在document.body元素上没有什么实际意义不多说了，

             scroll家族 主要用于document.body元素上， 用在页面元素上并没有什么特殊体现

             当页面出现上下或左右滑动条时，scroll的作用就体现出来了：

      document.body.scrollWidth和document.body.scrollHeight就是页面可视区域的大小了，

     document.body.scrollLeft和document.bodyscrollTop就是可视区离整个文档的左、顶侧的距离。

        最后关于这三者的总结就是 :

                    要找某个元素的位置和大小：用elem.offset；

                    要找涉及到元素的边框厚度：用elem.client  ;

                    要涉及到滚轮和可视区大小、距离，用：document.body.scroll ； 

        另外，对于事件对象e的几个获取鼠标位置的属性，是这样的（事件触发时传入并使用）：

         相对于屏幕左上角: e.screenX/screenY
         相对于文档显示区左上角: e.clientX/clientY
         相对于所在元素左上角的坐标:e.offsetX/offsetY

              

转载于:https://my.oschina.net/bghead/blog/800666