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 |
瀏覽器相容性
載入中…