offsetWidth ဂုဏ်သတ္တိ

offsetWidth ဂုဏ်သတ္တိသည် အစိတ်အပိုင်း၏ အပြည့်အဝအကျယ်ကို ပြသပေးပါသည် (အစိတ်အပိုင်း၏ ပင်ကိုယ်အကျယ်၊ နယ်နမိတ်များ၏ အကျယ်၊ အတွင်းပိုင်း ခြားနားမှု (padding)၊ ချိန်ညှိဘားတန်းများ ပါဝင်ပါသည်)။

ဝါကျဖွဲ့စည်းပုံ

javascriptelement.offsetWidth;

နမူနာ

အစိတ်အပိုင်းတစ်ခု၏ အပြည့်အဝအရွယ်အစားကို ကြည့်ကြရအောင်။

html<div id="elem"></div>
css#elem {
  width: 100px;
  height: 100px;
  padding: 15px;
  border: 10px solid black;
}
javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetWidth);

ကုဒ်များ လုပ်ဆောင်ပြီးနောက် ရလဒ်။

javascript150

နမူနာ

အကယ်၍ အစိတ်အပိုင်းသည် ဝှက်ထားပါက offsetWidth သည် 0 နှင့် ညီမျှပါသည်။

html<div id="elem"></div>
css#elem {
  display: none; /* ဝှက်ထားသော အစိတ်အပိုင်း */
  width: 100px;
  height: 100px;
  padding: 15px;
  border: 10px solid black;
}
javascriptlet elem = document.querySelector('#elem');
console.log(elem.offsetWidth);

ကုဒ်များ လုပ်ဆောင်ပြီးနောက် ရလဒ်။

javascript0

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

  • clientWidth ဂုဏ်သတ္တိ,
    ထိုဂုဏ်သတ္တိသည် အစိတ်အပိုင်း၏ နယ်နမိတ်အတွင်း အကျယ်ကို ပြသပေးသည်
  • offsetHeight ဂုဏ်သတ္တိ,
    ထိုဂုဏ်သတ္တိသည် အစိတ်အပိုင်း၏ အပြည့်အဝအမြင့်ကို ပြသပေးသည်
  • getComputedStyle နည်းလမ်း,
    ထိုနည်းလမ်းသည် အစိတ်အပိုင်း၏ CSS ဂုဏ်သတ္တိတန်ဖိုးကို ရယူပေးသည်