JavaScript offset家族

(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