CSS, HTML und Javascript mit {stil}

Javascript Breite / Höhe von Elementen

Javascript getBoundingClientRect Position und Koordinaten, Breite und Höhe

Breite und Höhe von Elementen unterliegen dem CSS Box-Modell – das gilt auch für Abfragen der Abmessung mit Javascript.

Umfassende Informationen zur Position eine Elements im Browserfenster mit Koordinaten gibt getBoundingClientRect.

Es gibt mehr als eine Methode, um die Breite / Höhe eines Elements mit Javascript herauszufinden.

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.

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.

Aber da ist die Sache mit dem Präfix offset / client: Was ist mit border, was ist ohne border?

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.

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

getBoundingClientRect

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

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

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.

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

getComputedStyle

getComputedStyle ist eine weitere Möglichkeit, die aktuelle Höhe / Breite eines Elements herauszufinden.

var elem = document.querySelector('.dimension');
var width = window.getComputedStyle(elem).width;
var 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.