HTML DOM offsetWidth Property
ဥပမာ
padding နှင့် border အပါအဝင် <div> ဒြပ်စင်တစ်ခု၏ အမြင့်နှင့် အကျယ်ကို ရယူပါ-
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
offsetWidth ပိုင်ဆိုင်မှုသည် padding၊ border နှင့် scrollbar အပါအဝင် pixels တွင်မြင်နိုင်သောဒြပ်စင်တစ်ခု၏အကျယ်ကိုပြန်ပေးသည်၊ သို့သော်အနားသတ်မဟုတ်ပါ။
"ကြည့်ရှုနိုင်သော" စကားလုံးကို သတ်မှတ်ရခြင်း အကြောင်းရင်းမှာ၊ ဒြပ်စင်၏ အကြောင်းအရာသည် ဒြပ်စင်၏ အမှန်တကယ် အကျယ်ထက် ပိုကျယ်နေပါက၊ ဤပိုင်ဆိုင်မှုသည် မြင်နိုင်သော အကျယ်ကိုသာ ပြန်ပေးလိမ့်မည် ("နောက်ထပ် ဥပမာများကို ကြည့်ပါ")။
မှတ်ချက်- ဤပိုင်ဆိုင်မှုကို နားလည်ရန်၊ သင်သည် CSS Box Model ကို နားလည်ရပါမည် ။
အကြံပြုချက်- ဤပိုင်ဆိုင်မှုကို offsetHeight ပိုင်ဆိုင်မှု နှင့် မကြာခဏတွဲသုံး ပါသည်။
အကြံပြုချက်- padding အပါအဝင် ဒြပ်စင်တစ်ခု၏ ကြည့်ရှုနိုင်သော အမြင့်နှင့် အကျယ်ကို ပြန်ပေးရန်အတွက် clientHeight နှင့် clientWidth ဂုဏ်သတ္တိများ ကို အသုံးပြုပါ ။
အကြံပြုချက်- ဒြပ်စင်တစ်ခုသို့ scrollbars များထည့်ရန်၊ CSS overflow property ကို အသုံးပြုပါ။
ဤပိုင်ဆိုင်မှုသည် ဖတ်ရန်သာဖြစ်သည်။
Browser ပံ့ပိုးမှု
Property | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
အထားအသို
element.offsetWidth
နည်းပညာဆိုင်ရာအသေးစိတ်
ပြန်ပို့တန်ဖိုး- | အကွက်၊ ဘောင်နှင့် Scrollbar အပါအဝင် pixels ရှိ အရာတစ်ခု၏ မြင်နိုင်သော အကျယ်ကို ကိုယ်စားပြုသည့် နံပါတ် |
---|
နောက်ထပ် ဥပမာများ
ဥပမာ
ဤဥပမာသည် clientHeight/clientWidth နှင့် offsetHeight/offsetWidth အကြား ခြားနားချက်ကို သရုပ်ပြသည်-
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
ဥပမာ
ဤနမူနာတွင် ကျွန်ုပ်တို့သည် ဒြပ်စင်သို့ scrollbar တစ်ခုကို ထည့်သောအခါတွင် clientHeight/clientWidth နှင့် offsetHeight/offsetWidth အကြား ခြားနားချက်ကို သရုပ်ပြသည်-
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";