Signatur
Beschreibung
Die Methode Element.getBoundingClientRect() gibt ein DOMRect-Objekt zurück, das Informationen über die Größe eines Elements und seine Position relativ zum Viewport liefert.
Der zurückgegebene Wert ist ein DOMRect-Objekt, welches das kleinste Rechteck darstellt, das das gesamte Element einschließlich seines Paddings und seiner Rahmenbreite enthält. Die Eigenschaften left, top, right, bottom, x, y, width und height beschreiben die Position und Größe des Gesamtrechtecks in Pixeln. Andere Eigenschaften als width und height sind relativ zur oberen linken Ecke des Viewports.
Die Eigenschaften width und height des von der Methode zurückgegebenen DOMRect-Objekts umfassen das padding und die border-width, nicht nur die Content-Breite/Höhe. Im Standard-Box-Modell entspräche dies der Eigenschaft width oder height des Elements + padding + border-width. Wenn jedoch box-sizing: border-box für das Element gesetzt ist, entspräche dies direkt seiner width oder height.
Der zurückgegebene Wert kann als Vereinigung der Rechtecke betrachtet werden, die von getClientRects() für das Element zurückgegeben werden, also der CSS-Border-Boxen, die mit dem Element verknüpft sind.
Leere Border-Boxen werden vollständig ignoriert. Wenn alle Border-Boxen des Elements leer sind, wird ein Rechteck mit einer width und height von null zurückgegeben, bei dem top und left die obere linke Ecke der Border-Box der ersten CSS-Box (in Content-Reihenfolge) für das Element sind.
Beim Berechnen des Bounding-Rechtecks wird das Ausmaß des Scrollens des Viewport-Bereichs (oder eines anderen scrollbaren Elements) berücksichtigt. Das bedeutet, dass sich die Randkanten des Rechtecks (top, right, bottom, left) bei jeder Änderung der Scroll-Position ändern (da ihre Werte relativ zum Viewport und nicht absolut sind).
Wenn Sie das Bounding-Rechteck relativ zur oberen linken Ecke des Dokuments benötigen, addieren Sie einfach die aktuelle Scroll-Position zu den Eigenschaften top und left (diese lassen sich mit window.scrollY und window.scrollX ermitteln), um ein Bounding-Rechteck zu erhalten, das unabhängig von der aktuellen Scroll-Position ist.
Rückgabewert
Beispiele
Basic — JavaScript
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);
}
}Scrolling — JavaScript
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();