clientHeight հատկությունը

clientHeight հատկությունը պարունակում է էլեմենտի բարձրությունը սահմանների ներսում padding-ի հետ միասին, բայց առանց border-ի և ոլորման։

Շարահյուսություն

էլեմենտ.clientHeight;

Օրինակ

Գտնենք էլեմենտի չափը․

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

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

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

Կոդի կատարման արդյունքը․

130

Օրինակ

Եթե էլեմենտին ավելանում է ոլորում, ապա բովանդակության լայնությունը նվազում է ոլորման լայնության չափով (մոտ 16px - կախված է բրաուզերից, ՕՀ-ից, սարքից)։ Հաջորդ օրինակում էլեմենտի բարձրությունը կլինի ավելի քիչ, քան սպասվում էր․

<div id="elem">Այս էլեմենտը ունի ոլորում։</div>

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

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

Կոդի կատարման արդյունքը․

114 (կախված է բրաուզերից)

Օրինակ

Եթե էլեմենտը թաքնված է, ապա clientHeight-ը կհավասարի 0-ի․

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

#elem {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	display: none; /* թաքնված էլեմենտ */
}

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

Կոդի կատարման արդյունքը․

0

Տես նաև

clientWidth հատկությունը,
որը պարունակում է էլեմենտի լայնությունը սահմանների ներսում
getComputedStyle մեթոդը,
որը ստանում է էլեմենտի CSS հատկության արժեքը