getBoundingClientRect()

`getBoundingClientRect()`是一个 JavaScript 方法，用于获取元素的大小及其相对于视口的位置。该方法返回一个 DOMRect 对象，包含了元素左上角的横坐标、纵坐标、宽度和高度等信息。

DOMRect 对象包含以下几个属性：

- `x`：元素左上角相对于视口的横坐标（即 `left` 属性的值）
- `y`：元素左上角相对于视口的纵坐标（即 `top` 属性的值）
- `width`：元素的宽度（即 `offsetWidth` 属性的值）
- `height`：元素的高度（即 `offsetHeight` 属性的值）
- `left`：元素左侧相对于视口的横坐标
- `right`：元素右侧相对于视口的横坐标
- `top`：元素顶部相对于视口的纵坐标
- `bottom`：元素底部相对于视口的纵坐标

例如，若要获取元素 `div` 相对于视口的位置及其大小，可以使用以下代码：

const rect = div.getBoundingClientRect();

console.log(rect.x);       // 元素左上角相对于视口的横坐标
console.log(rect.y);       // 元素左上角相对于视口的纵坐标
console.log(rect.width);   // 元素的宽度
console.log(rect.height);  // 元素的高度
console.log(rect.left);    // 元素左侧相对于视口的横坐标
console.log(rect.right);   // 元素右侧相对于视口的横坐标
console.log(rect.top);     // 元素顶部相对于视口的纵坐标
console.log(rect.bottom);  // 元素底部相对于视口的纵坐标

需要注意的是，`getBoundingClientRect()` 方法返回的是一个只读的 DOMRect 对象，因此它的属性不能被修改。