HTML DOM offsetWidth -Eigenschaft

元素对象参考手册Element-Objekt

Beispiel

Ermitteln Sie die Breite eines div-Elements, einschließlich Padding und Rahmen:

var elmnt = document.getElementById("myDIV"); var txt = "Höhe eines div-Elements, einschließlich Padding und Rahmen:" + elmnt.offsetHeight + "px<br>"; txt += "Breite eines div-Elements, einschließlich Padding und Rahmen:" + elmnt.offsetWidth + "px";

Selbst ausprobieren »

Definition und Verwendung

Die offsetWidth-Eigenschaft ist eine schreibgeschützte Eigenschaft, die die Pixelbreite des Elements zurückgibt. Die Breite umfasst Padding und Rahmen, schließt jedoch den Außenabstand (margin) nicht ein. Sie ist eine Ganzzahl in Pixeln (px).

Typischerweise ist offsetWidth eines Elements ein Maß für die CSS-Breite des Elements, einschließlich des Rahmens, des Paddings und der horizontalen Bildlaufleiste des Elements (falls vorhanden und gerendert), und umfasst nicht:beforeoder:afterdie Breite von Pseudoklassenelementen usw.

Für das Body-Objekt des Dokuments enthält es die gesamte lineare Inhaltshöhe des Elements anstelle der CSS-Breite. Die Breite des Inhalts, der sich von schwebenden Elementen nach unten erstreckt, wird ignoriert.

Wenn das Element ausgeblendet ist (zum Beispiel: Beim Element oder bei einem der Vorfahrenelemente des Elements iststyle.displayaufnonegesetzt), gibt es 0 zurück.

Hinweis:Um diese Eigenschaft zu verstehen, sieheCSS-Box-Modell。

Tipp:Diese Eigenschaft wird normalerweise mit deroffsetHeight-Eigenschaft verwendet.

Tipp:Verwenden Sie die clientHeightundclientWidth-Eigenschaft zum Zurückgeben der sichtbaren Höhe und Breite des Elements, wobei nur Padding eingeschlossen ist.

Tipp:Um einem Element eine Bildlaufleiste hinzuzufügen, können Sie dieoverflow-Eigenschaft verwenden.

Dies ist eine schreibgeschützte Eigenschaft.

Browser-Unterstützung

Eigenschaft
offsetWidth Ja Ja Ja Ja Ja

Syntax

element. offsetWidth

Technische Details

Rückgabewert: Gibt eine Ganzzahl zurück, die die Pixelbreite des Elements darstellt.

Weitere Beispiele

Beispiel

Das folgende Beispiel zeigt den Unterschied zwischen den Eigenschaften clientHeight/clientWidth und offsetHeight/offsetWidth:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "Höhe einschließlich Padding:" + elmnt.clientHeight + "px<br>"; txt += "Höhe einschließlich Padding und Rahmen:" + elmnt.offsetHeight + "px<br>"; txt += "Breite einschließlich Padding:" + elmnt.clientWidth + "px<br>"; txt += "Breite einschließlich Padding und Rahmen:" + elmnt.offsetWidth + "px";

Selbst ausprobieren »

Beispiel

Das folgende Beispiel zeigt den Unterschied zwischen den Eigenschaften clientHeight/clientWidth und offsetHeight/offsetWidth nach dem Hinzufügen einer Bildlaufleiste zum Element:

var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "<b>Stilinformationen des div:</b><br>"; txt += "Höhe einschließlich Padding:" + elmnt.clientHeight + "px<br>"; txt += "Höhe einschließlich Padding, Rahmen und Scrollbar:" + elmnt.offsetHeight + "px<br>"; txt += "Breite einschließlich Padding:" + elmnt.clientWidth + "px<br>"; txt += "Breite einschließlich Padding, Rahmen und Bildlaufleiste:" + elmnt.offsetWidth + "px";

Selbst ausprobieren »

元素对象参考手册Element-Objekt

Andere Erweiterungen