clientWidth Property

clientWidth property သည် element ၏ padding အပါအဝင် border အတွင်းပိုင်း အကျယ်ကို ဖော်ပြသော်လည်း border နှင့် scroll bar ၏အကျယ်တို့ကိုမူ ထည့်သွင်းမတွက်ချက်ပါ။

Syntax

element.clientWidth;

ဥပမာ

Element တစ်ခု၏အရွယ်အစားကို ရှာကြည့်ကြပါစို့။

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

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

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

ကုဒ်များကို run ပြီးနောက်ရရှိသောရလဒ်။

130

ဥပမာ

Element တွင် scroll bar ပေါ်လာပါက ၎င်း element ၏ အတွင်းပိုင်းအကျယ်သည် scroll bar ၏အကျယ် (ခန့်မှန်းခြေအားဖြင့် 16px ခန့် - သုံးနေသော browser၊ OS၊ device အပေါ်မူတည်၍) ကို နှုတ်ပြီးမှဖော်ပြပါသည်။ အောက်ပါဥပမာတွင် element ၏အကျယ်သည် မျှော်လင့်ထားသည်ထက်နည်းနေပါမည်။

<div id="elem">ဤ element တွင် scroll bar ရှိသည်။</div>

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

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

ကုဒ်များကို run ပြီးနောက်ရရှိသောရလဒ်။

114 (သုံးနေသော browser အပေါ်မူတည်သည်)

ဥပမာ

Element သည် ဝှက်ထားပါက clientWidth သည် 0 နှင့်ညီမျှပါမည်။

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

#elem {
	display: none; /* ဝှက်ထားသော element */
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

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

ကုဒ်များကို run ပြီးနောက်ရရှိသောရလဒ်။

0

ဆက်လက်လေ့လာရန်

clientHeight property,
သည် element ၏ border အတွင်းပိုင်း အမြင့်ကိုဖော်ပြသည်။
getComputedStyle method,
သည် element ၏ CSS property တန်ဖိုးကိုရယူပေးသည်။