We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Die Methode Element.getBoundingClientRect()  gibt die Größe eines Elementes und dessen relative Position zum Viewport zurück.

Syntax

var domRect = element.getBoundingClientRect();

Rückgabe

Der zurückgegebene Wert ist ein DOMRect Objekt, welches die Vereinigungsmenge aller von getClientRects() zurückgegebenen Rechtecken eines Elementes darstellt, das heißt, der CSS border-boxes, die mit dem Element verknüpft sind.

Der Rückgabewert ist das kleinste Rechteck welches das komplette Element beinhaltet. Es enthält die read-only-Eigenschaften left, top, right ,bottom, x, y, width und height, welche die border-box in Pixeln beschreibt. Alle Eigenschaften, abgesehen von width und height, sind realtiv zur linken oberen Ecke des Viewports.

Merke: Gecko 1.9.1 fügt die Eigenschaften Breite und Höhe zu dem DOMRect Objekt hinzu.

Leere Borderboxen werden vollständig ignoriert. Sind sämtliche Borderboxen eines Elements leer, oder entsprechen die top und left Angaben der Borderbox der ersten CSS-Box (in der Reihenfolge des Inhalts), so wird Null (zero) für top und left zurückgegeben.

Ein Rechteck mit Breiten- und Höhenwerten von Null wird stattdessen zurückgegeben, und wo top und left den top-left Werten der Border-Box der ersten CSS-Box (in Reihenfolge des Inhaltes) entsprechen.

Bei der Berechnung des Rechtecks werden sowohl scrollbare Elemente sowie Scrolling an sich (wie viel bereits gescrollt wurde) einbezogen. Das bedeutet, dass die top und left Eigenschaften ihre Werte verändern, sobald sich deren Scrollposition verändert (d.h. ihre Werte sind relativ zum Viewport und nicht absolut). Ist dieses Verhalten nicht erwünscht, wird die momentane Scrollposition zu den jeweiligen top und left Eigenschaften (mittels window.scrollX und window.scrollY), um konstante Werte die unabhängig von der derzeitigen Scrollposition sind.

Um Browserkompabilität zu gewährleisten, nutzen Sie window.pageXOffset und window.pageYOffset statt window.scrollY und window.scrollX. Sollten window.pageXOffsetwindow.pageYOffsetwindow.scrollX and window.scrollY undefined sein, nutzen Sie (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft and (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop.

Beispiel

// rect is a DOMRect object with four properties: left, top, right, bottom
var rect = obj.getBoundingClientRect();

Browser compatibility

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.0 (1.9) 4.0 [1] (Ja) 4.0
width/height (Ja) 3.5 (1.9.1) 9 (Ja) (Ja)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.0 1.0 1.0 (1.9) 6.0 (Ja) 4.0

[1] In IE8 und darunter fehlen dem von der Methode getBoundingClientRect() zurückgegebenen DOMRect die Eigenschaften Breite und Höhe. Desweiteren können zusätzliche Eigenschaften (u.a. Breite und Höhe) nicht zu den DOMRect hinzuaddiert werden.

In Gecko 12.0 wird der Effekt von CSS transforms bei der Berechnung von Begrenzungsrechtecken eines Elementes berücksichtigt.

Specification

Notes

getBoundingClientRect() wurde erstmals im DHTML Objektmodell von MS IE implementiert.

Der Rückgabewert von getBoundingClientRect() ist konstant, es können keine weiteren Eigenschaften hinzugefügt werden.

See also

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: phlmn, screeny05, giffeler, danieldiekmeier, jens-duttke, ohlupo
Zuletzt aktualisiert von: phlmn,