Eýeçilik clientHeight

Eýeçilik clientHeight element belgisini çäkler içinde padding bilen bilelikde, ýöne border we süýşmeksiz saklaýar.

Sintaksis

element.clientHeight;

Mysal

Geliň element ölçegini tapalyň:

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

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

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

Kodyň ýerine ýetiriliş netijesi:

130

Mysal

Eger elementde süýşme ýüze çyksa, onda mazmun belgisi süýşme belgisi boýunça azalýar (takmynan 16px - brauzere, Operasion Sistemä, enjama bagly). Indiki mysalda element belgisi garaşylýandan kiçi bolar:

<div id="elem">Bu elementde süýşme bar.</div>

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

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

Kodyň ýerine ýetiriliş netijesi:

114 (brauzere bagly)

Mysal

Eger element gizlenen bolsa, onda clientHeight 0 deň bolar:

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

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

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

Kodyň ýerine ýetiriliş netijesi:

0

Hem-de garaň

eýeçilik clientWidth,
element belgisini çäkler içinde saklaýar
usul getComputedStyle,
elementiň CSS eýeçilik bahasyny alyş üçin