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 wieder.
Syntax
rectObject = object.getBoundingClientRect();
Rückgabe
Der zurückgegebene Wert ist ein DOMRect Objekt, welches die Vereinigungsmenge aller von getClientRects() zurückgegebenen Rechtecken eines Elementes darstellt. Beispielsweise den CSS border-boxes, die mit dem Element verknüpft sind.
Der zurückgegebene Wert ist ein DOMRect Objekt, das die Eigenschaften left,top,right und bottom ausliest, welche die border-box in Pixeln beschreibt: Top und left sind relative zu top-left des Viewports.
Merke: Gecko 1.9.1 addiert die Eigenschaften Breite und Höhe zu dem DOMRect Objekt hinzu.
Leere Borderboxen, sofern leer, werden komplett ignoriert. 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 CSSbox(in Reihenfolge des Inhaltes) entsprechen.
Bei der Berechnung des Recheckes werden sowohl scrollbare Elemente sowie Scrolling an sich(wie viel bereits gescrollt wurde) mit 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, benutzen Sie window.pageXOffset und window.pageYOffset statt window.scrollY und window.scrollX. Sollten window.pageXOffset, window.pageYOffset, window.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
| 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.