现在的位置: 首页 > web前端 > 正文

JS中的offset

2020年07月10日 web前端 ⁄ 共 1008字 ⁄ 字号 评论关闭

  小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧。


  offset属性有用吗


  offset这个属性,可以说是非常有用的,顾名思义,offset翻译过来就是偏移量,从名字就可以看出它的具体意义了。也即是元素相当于父元素的偏移量。offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五个部分,直白的翻译过来分别是上偏移、左偏移、偏移宽度、偏移高度、偏移父级。翻译虽不够恰当,但仍可体现出其大致意义。offsetTop:元素相对父元素上方的偏移。offsetLeft:元素相对父元素左边框的偏移。offsetWidth:自身包括padding、边框、内容区的宽度。offsetHeight:自身包括padding、边框、内容去的高度。offsetParent:作为偏移参照点的父级元素。


  offset属性需要注意什么


  1、offsetTop和offsetLeft都是相对父元素的边框内部的偏移量。也即是元素边框外部到父元素边框内部的距离。2、offsetParent通常并不是元素的直接上级元素,而是指的离元素最近的设置过position(即position不为static)的父级元素,最多查询到body。即父级元素中不存在设置过position的元素时,其offsetParent为body;position=fixed元素的offsetParent为null;body元素的offsetParent为null。


  3、position为fixed的元素,其offsetParent为null,但是计算offsetTop和offsetLeft时,可将其认为是浏览器视口。4、但对于offsetParent同样为null的body,其offsetTop和offsetLeft永远为0。


  5、所有的值都不带单位px,可以直接使用。


  6、原生js中有个跟offset作用很类似的函数就是getBoundingClientRect(),它也可以获取元素偏移量和宽高,其中宽高的计算方式相同,但是在计算便宜量时,经过测试此函数永远是相对浏览器视口进行计算的。


  总之,JS中的offset给大家简单的介绍了一些,希望大家多看看。


  

【上篇】
【下篇】

抱歉!评论已关闭.