jQuery ရှိ outerWidth နှင့် outerHeight နည်းလမ်းများ

နောက်ဆုံး နည်းလမ်းတွဲမှာ outerWidth နှင့် outerHeight ဖြစ်ပြီး၊ ၎င်းတို့ကို အသုံးပြု၍ အစိတ်အပိုင်းတစ်ခု၏ အကျယ်နှင့် အမြင့်ကို အတွင်းပိုင်း ခြားနားချက်များ (padding) နှင့် နယ်နိမိတ်များ (border) အားလုံးကို ထည့်သွင်းစဉ်းစားပြီး ရယူနိုင်ပါသည်၊ သို့မဟုတ် အပြင်ဘက် ခြားနားချက်များ margin ကို ထည့်မတွက်နိုင်ပါ။

ဥပမာတစ်ခုကို ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် အောက်ပါ စာပိုဒ်ရှိသည်ဆိုပါစို့-

html<p id="test">စာသား</p>
<p id="out"></p>

CSS က အောက်ပါအတိုင်း ဖြစ်သည်-

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

စာပိုဒ် #test ၏ အကျယ်နှင့် အမြင့်တန်ဖိုးများကို အတွင်းပိုင်း ခြားနားချက်များနှင့် နယ်နိမိတ်များကို ထည့်တွက်ပြီး ရယူကြည့်ကြပါစို့။ ထိုသို့ပြုလုပ်ရန် ဤနည်းလမ်းများအတွင်း false ကို ပို့ပေးရမည် သို့မဟုတ် ကွင်းစကွင်းပတ်ကို ဗလာထားရမည် (အဘယ်ကြောင့်ဆိုသော် ၎င်းသည် နည်းလမ်း၏ ပုံသေအနေအထားတွင် ရှိနှင့်ပြီးသား ဖြစ်သောကြောင့်)-

javascriptlet w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

ယခု ကျွန်ုပ်တို့၏ တန်ဖိုးများသည် 4px ပို၍ ကွာခြားသွားပါမည်၊ အဘယ်ကြောင့်ဆိုသော် နယ်နိမိတ်၏ အထူမှာ တစ်ဖက်၌ 2px⁅/u‌⁆ စီ ရှိသောကြောင့် ဖြစ်သည်။

ယခုတဖန် စာပိုဒ် #test ၏ အကျယ်နှင့် အမြင့်တန်ဖိုးများကို ခြားနားချက်အားလုံးနှင့် နယ်နိမိတ်များကို ထည့်တွက်ပြီး ရယူကြည့်ကြပါစို့။ ထိုသို့ပြုလုပ်ရန် outerWidth နှင့် outerHeight နည်းလမ်းများအတွင်း true ကို ပို့ပေးရပါမည်-

javascriptlet w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

ယခု ကျွန်ုပ်တို့၏ တန်ဖိုးများသည် အရင် တန်ဖိုးများထက် 20px ပို၍ ကွာခြားသွားပါမည်၊ အဘယ်ကြောင့်ဆိုသော် ကျွန်ုပ်တို့၏ အပြင်ဘက် ခြားနားချက်များမှာ တစ်ဖက်၌ 10px⁅/u‌⁆ စီ ရှိသောကြောင့် ဖြစ်သည်။

Задание 1

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

ထို့အပြင် outerWidth နှင့် outerHeight နည်းလမ်းများကို အသုံးပြု၍ အစိတ်အပိုင်းများ၏ အကျယ်နှင့် အမြင့်တန်ဖိုးများကို ပြောင်းလဲနိုင်ပါသည်။ ဥပမာ၊ div #test1 ၏ အကျယ်ကို 250px နှင့် ညီအောင် သတ်မှတ်ပါစို့၊ ထို့ပြင် #test2 ၏ အမြင့်ကို 200px နှင့် ညီအောင်သတ်မှတ်ပါစို့-

javascript$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

အစိတ်အပိုင်းတစ်ခု၏ အရွယ်အစားများနှင့် အလုပ်လုပ်သော အထက်ဖော်ပြပါ နည်းလမ်းအားလုံးသည် set တစ်ခုအတွင်းရှိ အစိတ်အပိုင်းတစ်ခုစီအတွက် function တစ်ခုကို အသုံးချနိုင်ခြေ လမ်းကြောင်းကိုလည်း ပံ့ပိုးပေးထားပါသည်။