offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent共同组成了offset家族。获取的值会四舍五入

offsetWidth和offsetHight

这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。

offset宽/高  =  盒子自身的宽/高 + padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；

offsetLeft和offsetTop

返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)

offsetParent

  • 返回该对象的父级 （带有定位）如果当前元素的父级元素没有进行CSS定位，offsetParent为body。

  • 如果当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素。父系盒子中都没有定位的话，就返回body。

    offsetLeft和style.left区别

  • offsetLeft可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以，Style.left只能获取行内式，如果没有返回””；
  • offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px；
  • offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
Last modification：April 12, 2018
© Allow specification reprint
If you think my article is useful to you, please feel free to appreciate