js三大系列-offset系列

本文深入讲解了JavaScript中offset系列的五个核心属性:offsetWidth、offsetHeight、offsetLeft、offsetTop和offsetParent。详细解释了这些属性如何帮助我们测量元素的尺寸、定位以及找到带有CSS定位的最近父元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

js中有一套方便的获取元素尺寸的办法:offset系列

offset常用属性(5个)

  1. offsetWidth和offsetHeight————(检测盒子自身宽高+padding+border)
  2. offsetLeft和offsetTop————(检测距离父盒子有定位的左/上面的距离)
  3. offsetParent————(检测父系盒子中带有定位的父盒子节点)

offsetwidth和offsetheight

offset宽/高 = 盒子自身的宽/高 + padding +border;
(相较与client系列和scroll系列,这两个算宽高都不带边框。)

offsetWidth = width+padding+border;

offsetHeight = Height+padding+border;

offsetLeft和offsetTop

offsetLeft:返回距离上级盒子(带有定位)左边的位置,如果父级都没有定位则以body为准

offsetLeft和style.left的区别

  • 最大区别在于offseLeft可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以
  • offsetTop返回的是数字(值是四舍五入取整),style.top返回的是字符串(除了数字外还带有单位px)
  • offsetTop只读,而style.top可读写,写入时是以行内样式写入
  • style.top只能获取行内式样式。如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。

offsetParent:返回该对象的父级

如果当前元素的父级元素没有进行CSS定位(position为absolute或relative,fixed),offsetParent为body。

如果当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值