Eigenschaft clientHeight

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

Syntax

javascriptelement.clientHeight;

Beispiel

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

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

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

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

Ergebnis der Codeausführung:

javascript130

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:

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

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

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

Ergebnis der Codeausführung:

javascript114 (abhängig vom Browser)

Beispiel

Wenn das Element ausgeblendet ist, ist clientHeight gleich 0:

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

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

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

Ergebnis der Codeausführung:

javascript0

Siehe auch