Egenskapen clientWidth

Egenskapen clientWidth inneholder bredden til et element innenfor grensene sammen med padding, men uten border og scrollefelt.

Syntaks

javascriptelement.clientWidth;

Eksempel

La oss finne størrelsen på elementet:

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

Resultatet av kjøring av koden:

javascript130

Eksempel

Hvis elementet får et scrollefelt, reduseres bredden på innholdet med bredden på scrollefeltet (omtrent 16px - avhenger av nettleser, OS, enhet). I det følgende eksemplet vil bredden på elementet være mindre enn forventet:

html<div id="elem">Dette elementet har et scrollefelt.</div>

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

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

Resultatet av kjøring av koden:

javascript114 (avhenger av nettleser)

Eksempel

Hvis elementet er skjult, vil clientWidth være lik 0:

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

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

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

Resultatet av kjøring av koden:

javascript0

Se også