JavaScript offset家族

本文深入解析CSS盒子模型中offset系列属性的作用及应用,包括offsetWidth、offsetHeight、offsetLeft、offsetTop以及offsetParent。详细阐述了这些属性在获取元素尺寸、位置以及父元素时的特点和区别,为前端开发者提供了实用的代码调试技巧。
摘要由CSDN通过智能技术生成
(1)offsetWith & offsetHeight  用来获取盒子在页面上的实际占有的大小

  obj.style.width只能读取或者写入行内样式,对于非行内样式,它无法设置和读取

  1.obj.offsetWith 宽

    obj.offsetHeight 高

  2.obj.style.width 与 obj.offsetWidth的区别

  obj.style.width属性是字符串,读取出来的数据是带有"px"的(不能直接做加减乘除的运算)

   obj.offsetWidth是数值类型,读出的数据没有"px"(可以直接做加减乘除)

  obj.style.width是可读可写的

   offsetWidth是只读属性,不能修改。

  obj.style.width只能读取或者写入行内样式,对于非行内样式,它无法设置和读取

   offsetWidth可以随时读取当前盒子的宽度,无论是行内样式还是非行内样式

  注意:offsetWidth = width + padding + border

 

 (2)offsetLeft & offsetTop 盒子与上级盒子的距离

 注意,一定不能使用obj.style.left来计算距离

 obj.style.left,只能读写行内样式

  offsetLeft能读取任何地方设置的样式

 obj.style.left是个字符串,带有“px”后缀

  offsetLeft是数值类型,能直接做算数运算

 offsetLeft是只读的,obj.style.left是可读可写的

 offsetLeft读取的是距离上一级声明了定位方式的盒子的距离,如果没有任何1级父盒子声明了定位方式

  那么offsetLeft读取的就是距离body的距离。如果多个父级盒子都声明了定位方式,那么以最近的那个盒子为准

 offsetLeft读取到的是边框到边框的距离(含有padding

 

 注意:只有offsetLeft和offsetTop,没有offsetRight和offsetBottom

 

(3)offsetParent

offsetParent获取当前盒子的父级盒子的DOM对象

跟父级盒子有没有声明定位方式有直接关系。

如果父级盒子声明了定位方式,那么offsetParent读取到的就是离他最近的那个声明了定位的上级盒子。

如果所有的上级盒子都没晟敏定位,那么offsetParent读出来的就是body标签对象

 

parentNode得到的永远是直接父节点

转载于:https://www.cnblogs.com/ldq678/p/10108104.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值