一、什么是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=(102)+[300+(102)]+90=430，即等于 y + height

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

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

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

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

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

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

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

二、语法

三、返回值

四、示例及分析