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

elem.clientHeight;

Példa

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

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

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

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

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

130

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:

<div id="elem">Ennek az elemnek van görgetősávja.</div>

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

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

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

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

Példa

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

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

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

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

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

0

Lásd még

a clientWidth tulajdonság,
amely egy elem határain belüli szélességét tartalmazza
a getComputedStyle metódus,
amely egy elem CSS tulajdonságának értékét kéri le