资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/详细了解 offsetWidth、Height、Top、Left 以及偏移基准 offsetPar

详细了解 offsetWidth、Height、Top、Left 以及偏移基准 offsetPar

red_bricks / 601人阅读

摘要：前者计算元素的大小后者两者返回元素相对元素的偏移量返回一个元素的布局宽度计算方式设定的如果存在垂直滚动条返回一个元素的布局高度计算方式设定的如果存在水平滚动条大家看到是否很熟悉在盒子模型中提及在盒模型中其盒子大小的计算方式也是一样下面我们来

offsetWidth、Height、Top、Left 、offsetParent

前者计算元素的大小, 后者两者返回元素相对 offsetParent 元素的偏移量.

offsetWidth 
返回一个元素的布局宽度;

计算方式:

content width(CSS设定的width) + padding + border  + scrollBarWidth 如果存在垂直滚动条(scrollbar)
offsetHeight 
返回一个元素的布局高度;

计算方式:

content height(CSS设定的height) + padding + border + scrollbarHeight 如果存在水平滚动条(scrollbar)

大家看到 content + padding + border 是否很熟悉, 在盒子模型中提及, 在IE盒模型中,其盒子大小的计算方式也是一样.

下面我们来看看 offsetTop、offsetLeft 在了解它们两之前,先来了解下 offsetParent

offsetParent

可以理解为偏移的基准, 这有点类似定位属性中(absolute以最近的祖先元素容器且设置了定位属性的元素来进行位置偏移.)

什么样的元素为 offsetParent ?

拥有定位属性的元素

dispaly 为 table 或 table cell

默认情况下根元素

依次从内往外找, 如果没有, 默认就是已根元素作为 offsetParent 也就是偏移的基准.

当元素设置属性 display: none, 则它相应的 offsetParent属性返回值为 null.

注意:

如果元素为隐藏的（该元素或其祖先元素的 style.display 为 "none"）,或者该元素的 style.position 被设为 "fixed", 则该 offsetParent 属性返回 null。在 IE 9 中 display:none 无影响.

offsetLeft 
返回一个元素(border边框)到 offsetParent 元素左边界(边界可能为边框或内边距)的距离.
offsetTop 
返回一个元素(border边框)到 offsetParent 元素上边界(边界可能为边框或内边距)的距离.

下面我们来实战一下吧

这里分两种情况:

当不存在定位属性时： IE、Edge、Chrome、Firefix 呈现值不一样:

IE、Edge 中:

offsetLeft = box margin + body padding + body border + body margin + html padding + html border + html margin

可以理解为相对于视口的偏移

Chrome 中:

offsetLeft = box margin + body padding + body border + html padding + html border

可以理解为相对于HTML元素边框(包含边框)

Firefix 中:

offsetLeft = box margin + body padding + body border + html padding

可以理解为相对于HTML元素边框(不包含边框).

其实这里我是有疑问的, 为什么没有指定定位等属性情况下, ele.offsetParent === document.body 却为 true , 从结果来看实际偏移计算又是依据HTML或视口来的 , 如果有知道可以告知下.

当存在定位属性时, 更改下HTML代码, 如下:

IE、Edge、Firefox 中:

offsetLeft = box margin + body padding + body border + html padding

可以理解为相对于HTML边框偏移量(不包含边框)

Chrome 中:

offsetLeft = box margin + body padding + body border + html padding + html border

可以理解为相对于HTML边框偏移量(含边框)

如果不存在边框的话,在IE、Edge、Chrome、Firefox呈现方式一样的.

GPU云服务器 云服务器 offsetParent offsetWidth 基准测试 jsp基准路径

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104791.html

相关文章

  • 详细了解 offsetWidth、Height、Top、Left 以及偏移基准 offsetPar

    摘要：前者计算元素的大小后者两者返回元素相对元素的偏移量返回一个元素的布局宽度计算方式设定的如果存在垂直滚动条返回一个元素的布局高度计算方式设定的如果存在水平滚动条大家看到是否很熟悉在盒子模型中提及在盒模型中其盒子大小的计算方式也是一样下面我们来 offsetWidth、Height、Top、Left 、offsetParent 前者计算元素的大小, 后者两者返回元素相对 offsetPar...

    WilsonLiu95 评论0 收藏0

  • 详细了解 offsetWidth、Height、Top、Left 以及偏移基准 offsetPar

    摘要：前者计算元素的大小后者两者返回元素相对元素的偏移量返回一个元素的布局宽度计算方式设定的如果存在垂直滚动条返回一个元素的布局高度计算方式设定的如果存在水平滚动条大家看到是否很熟悉在盒子模型中提及在盒模型中其盒子大小的计算方式也是一样下面我们来 offsetWidth、Height、Top、Left 、offsetParent 前者计算元素的大小, 后者两者返回元素相对 offsetPar...

    骞讳护 评论0 收藏0

  • offsetWidth/offsetHeight、offsetLeft/offsetTop、offs

    摘要：因为一旦我们给父元素设置了会影响文档流。是指当前元素相对于父级参照物的偏移量。在标准浏览器中是指当前元素的左边框的外沿到父级参照物边框的内沿，如上图中的，，所示。盒子上边框的高度。 接下来我们依然讨论盒模型中的offset系列：offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent showImg(https://segme...

    JellyBool 评论0 收藏0

  • 如何判断元素是否在可视区域ViewPort

    摘要：在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性，不包括滚动条。 个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出...

    jayzou 评论0 收藏0

  • 如何判断元素是否在可视区域ViewPort

    摘要：在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生简单实现懒加载。被隐藏在内容区域左侧的像素数。比如上篇文章文字跑马灯项目中的使用戳此跳转小结只读属性，不包括滚动条。 个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出...

    xiguadada 评论0 收藏0

发表评论

登陆后可评论

0条评论

red_bricks

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<