一文读懂offsetHeight/offsetLeft/offsetTop/offsetWidth/offsetParent

一、偏移量

对于块级元素来说，offsetTop、offsetLeft、offsetWidth、offsetHeight描述了元素相对于offsetParent的边界框。

偏移量：包括元素在屏幕上占用的所有空间，元素的可见大小有高度，宽度决定，包括所有的内边距，滚动条和边框大小(注意：不包含外边距)，本文讲解的属性可获取元素的偏移量

二、相关概念

1. offsetHeight：获取元素的高度（在垂直方向上占用的空间大小）。
2. offsetWidth：获取元素的宽度（元素在水平方向上占用的空间大小）。
3. offsetTop：元素的上外边框至offsetParent元素的上内边框的距离。
4. offsetLeft：元素的左外边框距离offsetParent的左内边框的距离。

备注：

• 四个属性都是只读属性，返回单位是像素。
• offsetHeight和offsetWidth返回的大小包括元素的边框、内边距和滚动条高/宽度，不包含伪元素的高度。(标准盒模型下）。
• 这个属性将会 round(四舍五入) 为一个整数，如果想要一个 小数值，请使用element.getBoundingClientRect() 。

三、案例

以下面代码为例，来分别获取元素的偏移量,具体是怎样计算请看下图分析。

 

四、计算

以标准盒模型为例：

offsetWidth = 可视区的width+左右padding+左右边框 = 450+(10*2)+(8*2)=486

offsetHeight = 可视区的height+上下padding+上下边框 = 190+(10*2)+(8*2)=226

offsetTop：由上面的css可以知道父元素设置padding为100px,所以子元素距离父元素上内边框的距离为100，所以offsetTop = 100

offsetLeft：由上面的css可以知道父元素设置padding为100px,所以子元素距离父元素左内边框的距离为100，所以offsetLeft = 100