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

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

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

javascriptէլեմենտ.clientHeight;

Օրինակ

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

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

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

javascript130

Օրինակ

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

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

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

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

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

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

Օրինակ

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

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

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

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

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

javascript0

Տես նաև