Finding an element's size and position

Manchmal brauchen wir die Breite und Höhe eines Elements, oder auch die Position im HTML-Dokument. Diese Informationen können wir mit der Methode getBoundingClientRect() auslesen.

const domRect = element.getBoundingClientRect();

Wir erhalten mit domRect ein Objekt, das sechs Werte enthält:

• top bzw. y: die Distanz vom oberen Ende des Dokuments zum oberen Ende des Elements
• bottom: die Distanz vom oberen Ende des Dokuments zum unteren Ende des Elements
• left bzw. x: die Distanz vom linken Rand des Dokuments zum linken Rand des Elements
• right: die Distanz vom linken Rand des Dokuments zum rechten Rand des Elements
• width: die Breite des Elements (die gleich ist wie right minus left)
• height: die Höhe des Elements (gleich wie bottom minus top)

Wenn wir also die Breite eines Elements brauchen, schreiben wir folgendes:

const domRectWidth = domRect.getBoundingClientRect('width');