元素：getBoundingClientRect() 方法

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，提供有关元素大小及其相对于视窗位置的信息。

语法

getBoundingClientRect()

返回值

返回值是一个 DOMRect 对象，该对象是最小的包含整个元素的矩形，包括其内边距和边框宽度。left、top、right、bottom、x、y、width 和 height 属性以像素描述了整体矩形的位置和大小。除 width 和 height 之外的属性相对于视窗的左上角。

DOMRect object that is the smallest rectangle containing the entire element.

该方法返回的 DOMRect 对象的 width 和 height 属性包括 padding 和 border-width，而不仅仅是内容宽度/高度。在标准盒模型中，这将等于元素的 width 或 height 属性 + padding + border-width。但是，如果为元素设置了 box-sizing: border-box，则这将直接等于其 width 或 height。

返回值可以理解为由 getClientRects() 为元素返回的矩形的并集，即与元素关联的 CSS 边框框。

空边框框将被完全忽略。如果所有元素的边框框都是空的，则将返回一个矩形，其 width 和 height 为零，并且 top 和 left 是元素的第一个 CSS 框（按内容顺序）的边框框的左上角。

计算边界矩形时会考虑视窗区域（或任何其他可滚动元素）的滚动量。这意味着矩形的边界边缘 (top、right、bottom、left) 在每次滚动位置发生变化时都会改变其值（因为它们的值是相对于视窗的，而不是绝对的）。

如果您需要相对于文档左上角的边界矩形，只需将当前滚动位置添加到 top 和 left 属性（可以使用 window.scrollY 和 window.scrollX 获取这些属性）以获得一个独立于当前滚动位置的边界矩形。

示例

基本

这个简单的示例检索表示简单 <div> 元素的边界客户矩形的 DOMRect 对象，并在其下方打印出其属性。

html

<div></div>

css

div {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

let elem = document.querySelector("div");
let rect = elem.getBoundingClientRect();
for (const key in rect) {
  if (typeof rect[key] !== "function") {
    let para = document.createElement("p");
    para.textContent = `${key} : ${rect[key]}`;
    document.body.appendChild(para);
  }
}

请注意 width/height 等于其 width/height + padding。

还要注意 x/left、y/top、right 和 bottom 的值在每种情况下都等于从视窗相关边缘到元素该边的绝对距离。

滚动

此示例演示了当文档滚动时边界客户矩形是如何变化的。

html

<div id="example"></div>
<div id="controls"></div>

css

div#example {
  width: 400px;
  height: 200px;
  padding: 20px;
  margin: 50px auto;
  background: purple;
}

body {
  padding-bottom: 1000px;
}
p {
  margin: 0;
}

function update() {
  const container = document.getElementById("controls");
  const elem = document.getElementById("example");
  const rect = elem.getBoundingClientRect();

  container.textContent = "";
  for (const key in rect) {
    if (typeof rect[key] !== "function") {
      let para = document.createElement("p");
      para.textContent = `${key} : ${rect[key]}`;
      container.appendChild(para);
    }
  }
}

document.addEventListener("scroll", update);
update();

规范

规范
CSSOM 视图模块 # dom-element-getboundingclientrect

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

getClientRects()