随笔:offset、client、scroll的小总结
随笔:offset、client、scroll的小总结
我的头没你大 发表于1年前
随笔:offset、client、scroll的小总结
  • 发表于 1年前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

这段日子看到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

              

共有 人打赏支持
粉丝 2
博文 6
码字总数 3300
×
我的头没你大
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: