Element: getBoundingClientRect() 方法
Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，该对象提供有关元素大小及其相对于 视口 位置的信息。
语法
getBoundingClientRect()
参数
无。
返回值
返回的值是一个 DOMRect 对象，它是包含整个元素的最小矩形，包括其内边距和边框宽度。left、top、right、bottom、x、y、width 和 height 属性以像素为单位描述了整个矩形的位置和大小。除 width 和 height 之外的属性是相对于视口左上角的。
方法返回的 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 对象，并在其下方打印出其属性。
<div></div>
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 的值如何等于视口相关边缘到该元素一侧的绝对距离。
滚动
此示例演示了在滚动文档时边界客户端矩形如何变化。
<div id="example"></div>
<div id="controls"></div>
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 |
浏览器兼容性
加载中…