Eigenschaft clientWidth

Die Eigenschaft clientWidth enthält die Breite eines Elements innerhalb seiner Ränder zusammen mit Padding, aber ohne Border und Scrollleiste.

Syntax

javascriptelement.clientWidth;

Beispiel

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

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

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

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

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: 10px solid black;
  padding: 15px;
  overflow: scroll;
}

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

Ergebnis der Codeausführung:

javascript114 (abhängig vom Browser)

Beispiel

Wenn ein Element ausgeblendet ist, ist clientWidth gleich 0:

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

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

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

Ergebnis der Codeausführung:

javascript0

Siehe auch