一文读懂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() 。

三、案例

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

.boxparent{
   width: 500px;
   height: 260px;
   padding: 100px;
   background-color: rgb(250, 196, 196);
}

#box{
   width: 450px;
   height: 190px;
   padding: 10px;
   border: 8px solid #000000;
}

  //html

<div class="boxparent">
   <div id="box">
       网页可见区域宽：document.body.clientWidth
       网页可见区域高：document.body.clientHeight
       网页可见区域宽：document.body.offsetWidth (包括边线的宽)
       网页可见区域高：document.body.offsetHeight (包括边线的宽)
       网页正文全文宽：document.body.scrollWidth
       网页正文全文高：document.body.scrollHeight
       网页被卷去的高：document.body.scrollTop
   </div>
 </div>

四、计算

以标准盒模型为例：

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

五、相关文章

• 秒懂clientHeight/clientWidth/clientLeft/clientTop
• 秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）
• 超详细分析！！！秒懂getBoundingClientRect()