offsettop及相关属性介绍

offsetParent定位父级

  偏移量属性一般就是offsetLeft、offsetTop、offsetHeight、offsetWidth这四种了，然后还有一个offsetParent属性作为偏移的参照点。在网上看到的offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素（感觉和绝对定位的定位点很类似？）。然后具体情况分为下面几种：

1. position为fixed时，offsetParent为null，offsettop的值和top相等。此时元素是以视口来定位的。

2. position非fixed，父级元素无定位（static）时，offsetParent为body。

3. position非fixed，父级元素有定位时，offsetParent为最近的有定位的父级元素。

4. body元素，offsetParent为null，offsettop为0（似乎是废话）。

---

偏移量属性

offsetLeft：元素相对于定位父级左内框的距离; offsetTop: 元素相对于定位父级顶部内框的距离。

offsetWidth: 元素在水平方向上占用的空间大小，无单位(以像素px计); offsetHeight: 表示元素在垂直方向上占用的空间大小，无单位(以像素px计)。包括滚动条的宽度。

tips：偏移量属性都是只读的

---

其他类似属性

scrollHeight和scrollWidth，可滚动的绝对宽高，包括隐藏不可见的部分（offset仅是相对于元素的width和height不包括隐藏部分）。

scrollTop和scrollLeft: 可滑动的元素（即元素出现滚动条的情况时）内部在xy轴上滑动的距离，可为其赋值。

clientHeight和clientWidth：可视区域的宽高（不同浏览器中clientHeight和offsetWidth有区别）。

作者：ITgecko
链接：https://www.jianshu.com/p/135731ec13f1
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。