HTML DOM Element clientHeight Eigenschaft

Definition und Verwendung

clientHeight Die Eigenschaft gibt die sichtbare Höhe des Elements zurück, einschließlich der Innenabstände, aber ohne Rahmen, Scrollbalken oder Außenabstände, in Pixeln.

clientHeight Die Eigenschaft ist schreibgeschützt.

Weitere Informationen:CSS Box-Modell-Tutorial

Weitere Informationen:

clientWidth-Eigenschaft

clientTop-Eigenschaft

clientLeft-Eigenschaft

offsetHeight-Eigenschaft

offsetWidth-Eigenschaft

Um einen Scrollbalken zu einem Element hinzuzufügen, verwenden Sie CSS-overflow-Eigenschaft.

Beispiel

Beispiel 1

Erhalten Sie die Höhe und Breite von "myDIV", einschließlich der Innenabstände:

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

Versuchen Sie es selbst

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";

Versuchen Sie es selbst

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";

Versuchen Sie es selbst

Syntax

element.clientHeight

Rückgabewert

Typ Beschreibung
Zahl Die sichtbare Höhe des Elements (in Pixeln), einschließlich der Innenabstände.

Browserkompatibilität

Alle Browser unterstützen element.clientHeight:

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