ဂုဏ်သတ္တိ clientHeight

ဂုဏ်သတ္တိ clientHeight သည် အရာဝတ္ထု၏ အမြင့်ကို နယ်နိမိတ်အတွင်း၌ padding နှင့်အတူ ပါဝင်သော်လည်း border နှင့် လှိမ့်ခြင်းကို မပါဝင်ပါ။

ဖွဲ့စည်းပုံ

element.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 ဂုဏ်သတ္တိတန်ဖိုးကို ရယူသည်