jQuery ရှိ innerWidth နှင့် innerHeight method များ

innerWidth နှင့် innerHeight method များကို အသုံးပြု၍ element များ၏ အနံနှင့် အမြင့်ကို ရယူနိုင်သည်။ သို့သော် ဤနေရာတွင် မိမိတို့ရရှိမည်မှာ ပါဝင်သည့် အကြောင်းအရာ (content) သာမက အတွင်းဘက် ခြားနားမှု (padding) - padding တို့ကိုပါ ထည့်သွင်း တွက်ချက်ထားသည့် တန်ဖိုးများ ဖြစ်သည်။

ယခု #test စာပိုဒ်၏ အနံနှင့် အမြင့်တန်ဖိုးများကို innerWidth နှင့် innerHeight method များဖြင့် ရယူကာ အခြားစာပိုဒ်တစ်ခုတွင် �ော်ပြကြည့်ကြမည်။ မိမိတို့တွင် စာပိုဒ်နှစ်ခု ရှိသည်ဆိုပါစို့။

<p id="test">text</p>
<p id="out"></p>

CSS ကို အောက်ပါအတိုင်း သတ်မှတ်ထားသည်။

p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}

Javascript တွင် အောက်ပါ code ကို ရေးသားပါမည်။

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

မြင်တွေ့ရသည့်အတိုင်း ရလဒ်တန်ဖိုးများသည် ယခင်ကထက် 10px ခန့် ကွာခြားနေသည်။ အဘယ်ကြောင့်ဆိုသော် အတွင်းဘက် ခြားနားမှု (padding) ကို ထည့်သွင်းတွက်ချက်ထားသောကြောင့် ဖြစ်သည်။ ကျွန်ုပ်တို့၏ ဥပမာတွင် အတွင်းဘက် ခြားနားမှု (padding) သည် အားလုံးဘက်မှ 5px စီ ဖြစ်သည်။

ထို့အပြင် innerWidth နှင့် innerHeight method များကို အသုံးပြု၍ element များ၏ အနံနှင့် အမြင့် တန်ဖိုးများကို ပြောင်းလဲသတ်မှတ်နိုင်သည်။ ဥပမာ၊ #test1 div ၏ အနံကို 250px နှင့် #test2 ၏ အမြင့်ကို 200px ဟု သတ်မှတ်ကြည့်ရအောင်။

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

ပထမ ပုစ္ဆာ၏ အဖြေကို ဆက်လက်၍ ဖြည့်စွက်ပါ။ #wrapper div အောက်ရှိ ဒုတိယ စာပိုဒ်ထဲသို့ #wrapper div ၏ အနံနှင့် အမြင့် တန်ဖိုးများကို ဖော်ပြပါ။ ဤတစ်ကြိမ်တွင်မူ အတွင်းဘက် ခြားနားမှု (padding) များကို ထည့်သွင်းတွက်ချက်ရမည် ဖြစ်သော်လည်း အကာအရံ (border) နှင့် အပြင်ဘက် ခြားနားမှု (margin) များကိုမူ ထည့်သွင်းတွက်ချက်ရန် မလိုအပ်ပါ။