A clientWidth tulajdonság

A clientWidth tulajdonság tartalmazza az elem szélességét a határokon belül a padding-val együtt, de a border és a görgetés nélkül.

Szintaxis

javascriptelem.clientWidth;

Példa

Keressük meg az elem méretét:

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

A kód végrehajtásának eredménye:

javascript130

Példa

Ha az elemnél megjelenik a görgetősáv, akkor a tartalom szélessége a görgetősáv szélességével csökken (körülbelül 16px - a böngészőtől, operációs rendszertől, eszköztől függ). A következő példában az elem szélessége kisebb lesz, mint amire számítottunk:

html<div id="elem">Ennek az elemnek van görgetője.</div>

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

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

A kód végrehajtásának eredménye:

javascript114 (a böngészőtől függ)

Példa

Ha az elem rejtett, akkor a clientWidth értéke 0 lesz:

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

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

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

A kód végrehajtásának eredménye:

javascript0

Lásd még