clientWidth Property

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

Syntax

javascriptelement.clientWidth;

ဥပမာ

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

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

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

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

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

javascript130

ဥပမာ

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

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

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

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

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

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

ဥပမာ

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

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

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

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

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

javascript0

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