超详细分析！！！秒懂getBoundingClientRect()

目录

一、什么是Element.getBoundingClientRect()方法？有什么作用？

二、语法

三、返回值

四、示例及分析

 五、相关文章

---

一、什么是Element.getBoundingClientRect()方法？有什么作用？

• 作用：用来获取元素的位置以及大小相关的信息。
• 是DOM元素的一个方法，返回一个DOMRect对象，包含元素的大小及其相对于视口的位置。

二、语法

element.getBoundingClientRect（）

三、返回值

   该对象有6个属性：top,lef,right,bottom,width,height； 

{
  bottom：430, //元素底部距离窗口顶部的距离 (等于 y + height)
  height:340, //元素的高度
  left:120, //元素左侧距离窗口左侧的距离
  right:460, //元素右侧距离窗口右侧的距离(等于 x + width)
  top:90, //元素顶部距离窗口的距离
  width:340, //元素的宽度
  x:120, //元素左上角相对于视口的横坐标
  y:90 //元素左上角相对于视口的纵坐标
}
 

四、示例及分析

  下面是一个小案例，由下图可知当前元素为#box，及box的相关样式(图中红色框）,针对返回值进行详细分析与计算。结果如下图：

• width / height：width和height属性包含了padding和border ，而不仅仅是内容部分的宽度和高度。

              在标准盒子模型中，这两个属性值分别与元素的 width/height + padding + border-width 相等。

              如果是box-sizing:border-box ，两个属性则直接与元素的 width 或 height 相等。

---

• top：图中红色线表示top的取值区域，最外层边框到窗口顶部的距离。

                 计算：当前元素的margin-top为90，说明距离窗口顶部为90px，所以top=90

---

• left：图中蓝色线表示left的取值范围，可知是由最外层边框到窗口左侧的距离。

                 计算：当前元素的margin-left为120，说明距离窗口左侧为120px，所left=90

---

• bottom：图中紫色线表示bottom的取值范围，可知是元素最底部到窗口顶部的距离。

                 (包含元素的border、margin和元素总高度(padding+cotent height)）。

                 计算：此时的bottom=border+(content height+padding)+margin-top，所left=(10*2)+[300+(10*2)]+90=430，即等于 y + height

---

• right：图中绿色线表示right的取值范围，可知是元素最底部到窗口顶部的距离。

                 (包含元素的border、margin和元素总高度(padding+cotent width)）。

                 计算：此时的right=border+(content width +padding)+margin-right，所left=(10*2)+[300+(10*2)]+120=460，即等于x + width

---

•  x：元素左上角相对于视口的横坐标，即与left相同，所以x=120。
•  y：元素左上角相对于视口的纵坐标，即与top相同，所以y=90。

 五、相关文章

• 秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）
• 秒懂clientHeight/clientWidth/clientLeft/clientTop(详解）