HTML DOM Element clientWidth Eigenschaft

Definition und Verwendung

clientWidth Die Eigenschaft gibt die sichtbare Breite des Elements zurück, einschließlich des Innenabstands, aber ohne Rahmen, Scrollbalken oder Außenabstand, in Pixeln.

clientWidth Die Eigenschaft ist schreibgeschützt.

Siehe auch:CSS Box-Modell-Tutorial

Siehe auch:

clientHeight-Eigenschaft

clientTop-Eigenschaft

clientLeft-Eigenschaft

offsetHeight-Eigenschaft

offsetWidth-Eigenschaft

Fügen Sie einen Scrollbalken zu einem Element hinzu, indem Sie CSS overflow-Eigenschaft.

Beispiel

Beispiel 1

Erhalten Sie die Höhe und Breite von "myDIV", einschließlich des Innenabstands:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Probieren Sie es selbst aus

Beispiel 2

Beispiel 2: Unterschiede zwischen clientHeight/clientWidth und offsetHeight/offsetWidth

Ohne Scrollbalken:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Probieren Sie es selbst aus

Mit Scrollbalken:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Probieren Sie es selbst aus

Syntax

element.clientWidth

Rückgabewert

Typ Beschreibung
Wert Die sichtbare Breite des Elements (in Pixeln), einschließlich der Innenabstand.

Browserunterstützung

Alle Browser unterstützen element.clientWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt