HTML DOM offsetHeight 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";
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
offsetHeight ပိုင်ဆိုင်မှုသည် padding၊ border နှင့် scrollbar အပါအဝင် pixels တွင်မြင်နိုင်သောဒြပ်စင်တစ်ခု၏အမြင့်ကိုပြန်ပေးသည်၊ သို့သော်အနားသတ်မဟုတ်ပါ။
"ကြည့်ရှုနိုင်သော" စကားလုံးကို သတ်မှတ်ရခြင်း အကြောင်းရင်းမှာ ဒြပ်စင်၏ အကြောင်းအရာသည် ဒြပ်စင်၏ အမှန်တကယ် အမြင့်ထက် ပိုမြင့်ပါက၊ ဤပိုင်ဆိုင်မှုသည် မြင်နိုင်သော အမြင့်ကိုသာ ပြန်ပေးမည် ("နောက်ထပ် ဥပမာများကို ကြည့်ပါ")။
မှတ်ချက်- ဤပိုင်ဆိုင်မှုကို နားလည်ရန်၊ သင်သည် CSS Box Model ကို နားလည်ရပါမည် ။
အကြံပြုချက်- ဤပိုင်ဆိုင်မှုကို offsetWidth ပိုင်ဆိုင်မှု နှင့် မကြာခဏ တွဲသုံး ပါသည်။
အကြံပြုချက်- padding အပါအဝင် ဒြပ်စင်တစ်ခု၏ ကြည့်ရှုနိုင်သော အမြင့်နှင့် အကျယ်ကို ပြန်ပေးရန်အတွက် clientHeight နှင့် clientWidth ဂုဏ်သတ္တိများ ကို အသုံးပြုပါ ။
အကြံပြုချက်- ဒြပ်စင်တစ်ခုသို့ scrollbars များထည့်ရန်၊ CSS overflow property ကို အသုံးပြုပါ။
ဤပိုင်ဆိုင်မှုသည် ဖတ်ရန်သာဖြစ်သည်။
Browser ပံ့ပိုးမှု
Property | |||||
---|---|---|---|---|---|
offsetHeight | Yes | Yes | Yes | Yes | Yes |
အထားအသို
element.offsetHeight
နည်းပညာဆိုင်ရာအသေးစိတ်
ပြန်ပို့တန်ဖိုး- | အကွက်များ၊ ဘောင်နှင့် 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";