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).

Will man die Position des  Rechtecks in Bezug auf die Linke/Obere Ecke des Dokumentes haben, was der absoluten Position des Rechteckes entspricht, muss man zu den top und left Positionen, die Werte von window.scrollX und window.scrollY, addieren.

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
getBoundingClientRectChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3IE Vollständige Unterstützung 4Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung 6WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Safari for iOS will modify the effective viewport based on the user zoom. This results in incorrect values whenever the user has zoomed.
Samsung Internet Android Vollständige Unterstützung Ja
heightChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android ? Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android ?
widthChrome Vollständige Unterstützung JaEdge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 3.5IE Vollständige Unterstützung 9Opera Vollständige Unterstützung JaSafari Vollständige Unterstützung JaWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android ? Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android ?
xChrome Vollständige Unterstützung JaEdge Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox Vollständige Unterstützung JaIE Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Vollständige Unterstützung JaSafari Keine Unterstützung NeinWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android ? Opera Android Vollständige Unterstützung JaSafari iOS ? Samsung Internet Android ?
yChrome Vollständige Unterstützung JaEdge Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Firefox Vollständige Unterstützung JaIE Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise Returns a ClientRectList with ClientRect objects (which do not contain x and y properties) instead of DOMRect objects.
Opera Vollständige Unterstützung JaSafari Keine Unterstützung NeinWebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaFirefox Android ? Opera Android Vollständige Unterstützung JaSafari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

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

Zuletzt aktualisiert von: napengam,