Eigenschaft clientHeight

Die Eigenschaft clientHeight enthält die Höhe eines Elements innerhalb seiner Grenzen zusammen mit Padding, aber ohne Rahmen und Scrollleiste.

Syntax

element.clientHeight;

Beispiel

Lassen Sie uns die Größe eines Elements ermitteln:

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	padding: 15px;
}

<div id="elem"></div>

let elem = document.querySelector('#elem');
console.log(elem.clientHeight);

Ergebnis der Codeausführung:

130

Beispiel

Wenn bei einem Element eine Scrollleiste erscheint, verringert sich die Breite des Inhalts um die Breite der Scrollleiste (etwa 16px - abhängig vom Browser, Betriebssystem, Gerät). Im folgenden Beispiel wird die Breite des Elements geringer sein als erwartet:

<div id="elem">Dieses Element hat eine Scrollleiste.</div>

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	padding: 15px;
	overflow: scroll;
}

let elem = document.querySelector('#elem');
console.log(elem.clientHeight);

Ergebnis der Codeausführung:

114 (abhängig vom Browser)

Beispiel

Wenn das Element ausgeblendet ist, ist clientHeight gleich 0:

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	display: none; /* ausgeblendetes Element */
}

let elem = document.querySelector('#elem');
console.log(elem.clientHeight);

Ergebnis der Codeausführung:

0

Siehe auch

die Eigenschaft clientWidth,
die die Breite eines Elements innerhalb seiner Grenzen enthält
die Methode getComputedStyle,
die den Wert einer CSS-Eigenschaft eines Elements abruft