使用getBoundingClientRect获取元素的位置和大小

简介

在JavaScript中，使用getBoundingClientRect()方法来获取元素的位置和大小是常用的一种方法。该方法返回一个DOMRect对象，包括元素的左、上、右、下四个方向的坐标位置以及元素的宽度和高度。接下来我们将详细介绍如何使用该方法来获取元素的位置和大小。

用法

语法

var rect = element.getBoundingClientRect();

其中，element是需要获取位置和大小的元素。rect是返回的DOMRect对象。

返回值

DOMRect对象包括以下属性：

• x: 元素左侧到视口左侧的距离
• y: 元素顶部到视口顶部的距离
• width: 元素宽度
• height: 元素高度
• top: 元素顶部到视口顶部的距离
• right: 元素右侧到视口左侧的距离
• bottom: 元素底部到视口顶部的距离
• left: 元素左侧到视口左侧的距离

示例

<div id="box"></div>

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 50px;
  top: 50px;
}

var box = document.getElementById('box');
var rect = box.getBoundingClientRect();

console.log(rect.x); // 50
console.log(rect.y); // 50
console.log(rect.width); // 100
console.log(rect.height); // 100
console.log(rect.top); // 50
console.log(rect.right); // 150
console.log(rect.bottom); // 150
console.log(rect.left); // 50

总结

使用getBoundingClientRect()方法可以方便地获取元素的位置和大小，以便进行一些元素定位和布局的操作。需要注意的是，DOMRect对象中的属性值是基于视口的，而不是基于文档的。如果需要获取基于文档的位置和大小，需要结合文档滚动条的位置进行计算。