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 die Eigenschaften offsetWidth und offsetHeight bestimmt werden, unter Berücksichtigung von Padding-, Rahmen- und Margengrößen

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 die Eigenschaften clientWidth und clientHeight bestimmt werden, unter Berücksichtigung von Padding-, Rahmen- und Margengrößen

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.

Siehe auch