js中getBoundingClientRect()方法详解

Posted 2022-08-16 勇敢*牛牛

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: 0

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