Koordinaten des Browserfensters
Javascript hantiert mit zwei Koordinatensystemen: relativ zum Browserfenster oder relativ zum Dokument.
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.
console.log (document.querySelector(".elem").getBoundingClientRect ());
gibt ein DOMRect-Objekt zurück.
▼ DOMRect
bottom: 587.34375
height: 13.65625
left: 409
right: 859
top: 573.6875
width: 450
x: 409
y: 573.6875
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.
DOMRect
Die Koordinaten sind relativ zum Browserfenster, nicht zum Dokument. Die Werte sind die Koordinaten der linken oberen Ecke und der rechten unteren Ecke des Elements (top, left, right, bottom), und zwar inkl. padding, border und Scrollbar, aber ohne margin.
| top | Abstand obere Kante von oben |
| left | Abstand von links |
| right | Abstand von links bis zum rechten Rand des Elements |
| bottom | Abstand von oben bis zum unteren Rand des Elements |
| x | x-Position |
| y | y-Position |
| width | Breite |
| height | Höhe |
top und bottom werden der oberen linken Ecke vom Browserfenster / Viewport gemessen – nicht vom oberen Rand des Dokuments im Browserfenster.
Die Werte von x und y entsprechen den Werten von left und top.
getBoundingClientRect liefert dieselben Ergebnisse wie clientWidth, offsetWidth und Co – ohne die Präfixe client und offset und als pure Zahl.
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;
offsetWidth und clientHeight
Das sind die ältesten Methoden – schnell und effizient. Das Ergebnis liefert die aktuellen Pixel als Zahl.
- 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.
Wenn das Element breiter oder höher als die gerenderte Box ist und gescrollt werden kann:
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.
- 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.
getComputedStyle gibt einen String zurück und der aktuelle Wert als Number erfordert den Aufruf von parseInt.