js中getBoundingClientRect()方法详解

getBoundingClientRect()

用法：​​元素对象.getBoundingClientRect()​​​ 例如：​​div.getBoundingClientRect()​​ 返回值：
​​getBoundingClientRect()​​ 返回的是矩形的集合。
表示了当前盒子在浏览器中的位置以及自身占据的空间的大小，除了 width 和 height 之外，
其他的属性是相对于视图窗口的左上角 来计算的。
如：

• bottom 是盒子底部边框 距离 视口顶部 的距离；
• right 是盒子右侧边框距离视口左侧的距离

我设置一个盒子：

*{
    margin: 0;
    padding: 0;
}
div{
    width:100px;
    height: 200px;
    background-color: rgb(109, 27, 141);
}

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

bottom: 200
height: 200
left: 0
right: 100
top: 0
width: 100
x: 0
y:

放大镜和拖拽就是利用这个属性方法来完成了定位。