Neueste Web-Entwicklung Tutorials
 

HTML DOM clientWidth Propery

<Element Object

Beispiel

Holen Sie die Höhe und Breite eines <div> Element, einschließlich padding:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

Das Ergebnis der txt wird:

Height with padding: 270px
Width with padding: 420px
Versuch es selber "

Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.

Definition und Verwendung

Die client Eigenschaft gibt die sichtbare Breite eines Elements in Pixeln, einschließlich padding, aber nicht die Grenze, scrollbar oder Rand.

Der Grund , warum die "viewable" Wort angegeben ist, liegt daran , dass , wenn der Inhalt des Elements breiter als die tatsächliche Breite des Elements ist, wird diese Eigenschaft nur die Breite zurück , die sichtbar ist (See "More Examples") .

Hinweis: Um diese Eigenschaft zu verstehen, müssen Sie das verstehen CSS - Box - Modell .

Tipp: Diese Eigenschaft oft verwendet wird , zusammen mit der client Eigenschaft.

Tip: Mit den offset und offset Eigenschaften der sichtbaren Höhe und der Breite eines Elements zurückzubringen, einschließlich padding, Grenz- und scrollbar.

Tipp: Um die Bildlaufleisten zu einem Elemente hinzuzufügen, die CSS - Überlauf - Eigenschaft.

Diese Eigenschaft ist schreibgeschützt.

Browser-Unterstützung

Eigentum
clientWidth Ja Ja Ja Ja Ja

Syntax

element .clientWidth

Technische Details

Rückgabewert: Eine Zahl ist, die sichtbare Breite eines Elements in Pixeln darstellt, einschließlich padding
Beispiele

Mehr Beispiele

Beispiel

Dieses Beispiel zeigt den Unterschied zwischen client / client und offset / offset:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

Das Ergebnis der txt wird:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Versuch es selber "

Beispiel

Dieses Beispiel zeigt den Unterschied zwischen client / client und offset / offset, wenn wir eine Scrollbar mit dem Element hinzu:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Das Ergebnis der txt wird:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Versuch es selber "

<Element Object