Ominaisuus clientWidth

Ominaisuus clientWidth sisältää elementin leveyden rajojen sisällä yhdessä paddingin kanssa, mutta ilman borderia ja vierityspalkkia.

Syntaksi

javascriptelementti.clientWidth;

Esimerkki

Etsitään elementin koko:

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

Koodin suorituksen tulos:

javascript130

Esimerkki

Jos elementille ilmestyy vierityspalkki, sisällön leveys pienenee vierityspalkin leveyden verran (noin 16px - riippuu selaimesta, käyttöjärjestelmästä, laitteesta). Seuraavassa esimerkissä elementin leveys on pienempi kuin odotettiin:

html<div id="elem">Tällä elementillä on vierityspalkki.</div>

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

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

Koodin suorituksen tulos:

javascript114 (riippuu selaimesta)

Esimerkki

Jos elementti on piilotettu, clientWidth on 0:

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

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

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

Koodin suorituksen tulos:

javascript0

Katso myös