Bestimmung der Dimensionen von Elementen
Es gibt mehrere Eigenschaften, die Sie betrachten können, um die Breite und Höhe von Elementen zu bestimmen, und es kann schwierig sein, herauszufinden, welche die richtige für Ihre Bedürfnisse ist. Dieser Artikel soll Ihnen bei dieser Entscheidung helfen. Beachten Sie, dass all diese Eigenschaften schreibgeschützt sind. Wenn Sie die Breite und Höhe eines Elements festlegen möchten, verwenden Sie width
und height
oder die überschreibenden Eigenschaften min-width
und max-width
, sowie min-height
und max-height
.
Wie viel Platz nimmt es ein?
Wenn Sie wissen müssen, wie viel Platz ein Element insgesamt einnimmt, einschließlich der Breite des sichtbaren Inhalts, der Bildlaufleisten (falls vorhanden), der Füllung und der Rahmen, sollten Sie die Eigenschaften HTMLElement.offsetWidth
und HTMLElement.offsetHeight
verwenden. Meistens sind diese identisch mit der Breite und Höhe von Element.getBoundingClientRect()
, wenn keine Transformationen auf das Element angewendet werden. Im Falle von Transformationen geben offsetWidth
und offsetHeight
die Layoutbreite und -höhe des Elements zurück, während getBoundingClientRect()
die Rendering-Breite und -höhe zurückgibt. Als Beispiel, wenn das Element width: 100px;
und transform: scale(0.5);
hat, wird getBoundingClientRect()
50 als Breite zurückgeben, während offsetWidth
100 zurückgibt. Ein weiterer Unterschied ist, dass offsetWidth
und offsetHeight
die Werte auf ganze Zahlen runden, während getBoundingClientRect()
genauere Dezimalpunktwerte liefert.
Wie groß ist der angezeigte Inhalt?
Wenn Sie wissen müssen, wie viel Platz der tatsächlich angezeigte Inhalt einnimmt, einschließlich Füllung, jedoch ohne Rahmen, Ränder oder Bildlaufleisten, sollten Sie die Eigenschaften Element.clientWidth
und Element.clientHeight
verwenden:
Wie groß ist der Inhalt?
Wenn Sie die tatsächliche Größe des Inhalts wissen müssen, unabhängig davon, wie viel davon derzeit sichtbar ist, sollten Sie die Eigenschaften Element.scrollWidth
und Element.scrollHeight
verwenden. Diese geben die Breite und Höhe des gesamten Inhalts eines Elements zurück, selbst wenn aufgrund der Verwendung von Bildlaufleisten nur ein Teil davon derzeit sichtbar ist.
Zum Beispiel, wenn ein Element mit 600x400 Pixeln in einem Scroll-Container mit 300x300 Pixeln angezeigt wird, gibt scrollWidth
600 und scrollHeight
400 zurück.