Javascript getBoundingClientRect – Position im Browserfenster

getBoundingClientRect Position und Koordinaten im Browser, Breite und Höhe: offset Width, offset height, client width, client Height, get Bounding Client Rect, scroll Width, scroll height

Javascript hantiert mit zwei Koordinatensystemen: relativ zum Browserfenster oder relativ zum Dokument.

getBoundingClientRect liefert die Position eines Elements im Browserfenster / Viewport (so wie client Width, client Height, offset Width oder offset Height, aber ohne Präfix und als pure Zahl).

Die Koordinaten relativ zum Browserfenster beziehen den bereits ausgescrollten Teil des Dokuments nicht mit ein. Sie werden immer von der linken oberen Ecke des Browserfensters aus berechnet. Wenn die Seite gescrollt wird, ändern sich Window-Koordinaten.

Die Koordinaten können Nachkommastellen zeigen, müssen aber nicht gerundet werden, wenn sie als CSS eingesetzt werden. Koordinaten können negativ werden, wenn die obere / rechte Kante des Elements nach oben bzw. nach rechts aus dem Browserfenster herausgescrollt wurde.

getBoundingClientRect

getBoundingClientRect (Window-Koordinaten) liefert die Position eines Elements im Viewport (so wie clientWidth, offsetWidth …, aber ohne Präfix und als pure Zahl).

getBoundingClientRect zeigt Abstände eines Elements gegen ein Browserfenster
getBoundingClientRect
Gibt ein TextRectangle-Objekt (inkl. padding, border und Scrollbar, aber ohne margin) zurück, dessen Elemente die Koordinaten der linken oberen Ecke und der rechten unteren Ecke sind (top, left, right, bottom). Die Koordinaten sind relativ zum Window, nicht zum Dokument (alle modernen Browser).

getBoundingClientRect liefert dieselben Ergebnisse wie clientWidth, offsetWidth und Co – ohne die Präfixe client und offset und als pure Zahl.

top und bottom werden der oberen linken Ecke von window gemessen – nicht vom oberen Rand des Dokuments im Browserfenster.

let rect = document.querySelector('.demobox').getBoundingClientRect();
let left = rect.left;
let top = rect.top;
let width = rect.width;
let height = rect.height;
let bottom = rect.bottom;
let right = rect.right;

Element im Viewport?

Wann kommt ein Element beim Scrollen in den Viewport? Wichtige Frage für viele CSS-Animationen und Javascript-Effekte.

isScrolledIntoView
function isScrolledIntoView(el) {
    let elemTop = el.getBoundingClientRect().top;
    let elemBottom = el.getBoundingClientRect().bottom;

    let isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}	

Und getBoundingClientRect stellt auch gleich noch fest, wie breit der Block im Browserfenster ist.

let boxwidth = document.querySelector(".viewport-animation").getBoundingClientRect().width;

Bilder mit XMLHttpRequest (PHP und JSON) nachladen, wenn der Bereich im Browserfenster sichtbar wird.

offsetWidth und clientHeight

Das sind die ältesten Methoden – schnell und effizient. Das Ergebnis liefert die aktuellen Pixel als Zahl.

Unterschied zwischen offsetWidth/offsetHeight und clientWidth/clientHeight
clientWidth
Sichtbare Breite eines Elements in px inkl. padding.
clientHeight
Sichtbare Höhe eines Elements in px inkl. padding.
offsetWidth
Sichtbare Breite eines Elements in px, inkl. padding, border und Scrollbar, aber ohne margin.
offsetHeight
Sichtbare Höhe eines Elements in px, inkl. padding, border und Scrollbar, aber ohne margin.
Olim lacus colueram,
olim pulcher extiteram,
dum cignus ego fueram.
Miser, miser modo niger
et ustus fortiter!
Girat, regirat garcifer;
me rogus urit fortiter;
propinat me nunc dapifer,
Miser, miser modo niger
et ustus fortiter!
Nunc in scutella iaceo,
et volitare nequeo
dentes frendentes video:
Miser, miser modo niger
et ustus fortiter!

scrollWidth, scrollHeight

Der Inhalt eines Elements kann größer sein als die aktuelle Breite / Höhe. Dann geben die Abfragen nur die sichtbare Breite / Höhe zurück.

Koordinaten von Elementen relativ zum Ursprung des Elements, egal, wie weit gescrollt wurde
scrollWidth
Breite eines Elements in px, inkl. Regionen des Elements, die durch Scrollen verborgen sind, inkl. padding.
scrollHeight
Höhe eines Elements in px, inkl. Regionen des Elements, die durch Scrollen verborgen sind, inkl. padding.

Mit jQuery sieht es einfach aus, aber jQuery liefert bei der Abfrage width() / height() einen String, aus dem die 'px' meist wieder mit parseInt herausoperiert werden müssen.

let height = $(".demobox").height(); // 50px
let  width = $(".demobox").width();   // 250px

getComputedStyle

Breite und Höhe von Elementen unterliegen dem CSS Box-Modell – das gilt auch für Abfragen der Abmessung mit Javascript. getComputedStyle ist eine Möglichkeit, die aktuelle Höhe / Breite eines Elements herauszufinden.

let elem = document.querySelector('.dimension');
let width = window.getComputedStyle(elem).width;
let height = window.getComputedStyle(elem).height;

Genauso wie bei width / height mit jQuery liefert getComputedStyle einen String und der aktuelle Wert als Number erfordert wieder den Aufruf von parseInt.

top bottom left right Es ging spazieren vor dem Torein kohlpechschwarzer Mohr.Die Sonne schien ihm aufs Gehirn,da nahm er seinen Sonnenschirm. marginborderpadding offsetWidthoffsetHeight clientWidthclientHeight Koordinaten von Elementen relativ zum Ursprung des Elements, egal, wie weit gescrollt wurde padding padding clientHeight scrollHeight