HTML-DOM clientWidth Eigenschaft

元素对象参考手册Element-Objekt

Beispiel

Ermitteln Sie die Breite eines div-Elements einschließlich Innenabstand:

var elmnt = document.getElementById("myDIV"); var txt = "Die Höhe eines div-Elements einschließlich Innenabstand:" + elmnt.clientHeight + "px<br>"; txt += "Die Breite eines div-Elements, einschließlich Padding:" + elmnt.clientWidth + "px";

Selbst ausprobieren »

Definition und Verwendung

Die clientWidth-Eigenschaft ist eine schreibgeschützte Eigenschaft, die die Pixelbreite des Elements zurückgibt. Die Breite enthält Padding, aber nicht Border, Margin oder Bildlaufleiste. Sie ist eine Ganzzahl in Pixeln (px).

Bei Inline-Elementen und Elementen ohne CSS-Stile ist der Wert der clientWidth-Eigenschaft 0.

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

Tipp:Diese Eigenschaft wird normalerweise zusammen mit derclientHeight-Eigenschaft verwendet.

Tipp:Verwenden Sie die offsetHeightundoffsettWidth-Eigenschaft, um die sichtbare Höhe und Breite eines Elements einschließlich Padding und Border zurückzugeben.

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

Dies ist eine schreibgeschützte Eigenschaft.

Browser-Unterstützung

Eigenschaft
clientWidth Ja Ja Ja Ja Ja

Syntax

element.clientWidth

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 enthält Padding:" + elmnt.clientHeight + "px<br>"; txt += "Höhe enthält Padding und Rahmen:" + elmnt.offsetHeight + "px<br>"; txt += "Breite enthält Padding:" + elmnt.clientWidth + "px<br>"; txt += "Breite enthält 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>Die Stilinformationen des div-Elements:</b><br>"; txt += "Höhe enthält Padding:" + elmnt.clientHeight + "px<br>"; txt += "Höhe enthält Padding, Rahmen und Bildlaufleiste:" + elmnt.offsetHeight + "px<br>"; txt += "Breite enthält Padding:" + elmnt.clientWidth + "px<br>"; txt += "Breite enthält Padding, Rahmen und Bildlaufleiste:" + elmnt.offsetWidth + "px";

Selbst ausprobieren »

元素对象参考手册Element-Objekt

Andere Erweiterungen