getBoundingClientRect 方法完全指南

什么是 getBoundingClientRect？

简单来说，这是一个 DOM 元素的方法，调用后会返回一个对象，包含该元素相对于浏览器视口（viewport）的位置和尺寸信息。返回的对象有以下属性：

• left：元素左边距离视口左边的距离
• right：元素右边距离视口左边的距离
• top：元素顶部距离视口顶部的距离
• bottom：元素底部距离视口顶部的距离
• width：元素的宽度
• height：元素的高度
• x：等同于 left
• y：等同于 top

创建一个简单的演示

为了更直观地理解，我们可以创建一个彩色方块，实时显示它的位置信息：

<div id="box" style="width: 100px; height: 100px; background: red;"></div>
<div id="info"></div>

const box = document.getElementById('box');
const info = document.getElementById('info');

function updateRect() {
  const rect = box.getBoundingClientRect();
  info.textContent = `Left: ${rect.left}, Top: ${rect.top}, Width: ${rect.width}`;
}

box.addEventListener('mousemove', updateRect);
updateRect();

让元素可交互

为了更深入地理解，可以让用户通过拖拽来改变元素的位置和大小：