A clientHeight tulajdonság

A clientHeight tulajdonság egy elem határain belüli magasságát tartalmazza a padding-val együtt, de a border és a görgetősáv nélkül.

Szintaxis

javascriptelem.clientHeight;

Példa

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

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

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

javascript130

Példa

Ha egy 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ősávja.</div>

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

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

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 clientHeight értéke 0 lesz:

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

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

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

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

javascript0

Lásd még