outerHeight နည်းလမ်း

outerHeight နည်းလမ်းသည် element ၏ အမြင့်ကို အတွင်းပိုင်း အကွာအဝေး၊ နယ်သတ်မျဉ်းနှင့် ရွေးချယ်သော ပြင်ပအကွာအဝေးများကို ထည့်သွင်းစဉ်းစားကာ ရယူနိုင်ပြီး ပြောင်းလဲနိုင်စေသည်။ မှတ်သားရမည့် အရေးကြီးသည်မှာ ကျွန်ုပ်တို့သည် 'တွက်ချက်ထားသော တန်ဖိုး' အမြင့် (computed height) ကို ရရှိမည်ဖြစ်သည်။ အသုံးပြုသူက စာမျက်နှာအတိုင်းအတာကို ပြောင်းလဲသောအခါ၊ ထို့အပြင် element သို့မဟုတ် ၎င်း၏မိဘ element ကို ဝှက်ထားသောအခါ တွက်ချက်မှုအမှားများလည်း ဖြစ်ပေါ်နိုင်သည်။

ဝါကျဖွဲ့ပုံ

ဤနည်းဖြင့် element ၏ အမြင့်ကို ရယူနိုင်သည်။ ဤနည်းလမ်းသည် မဖြစ်မနေလိုအပ်ချက်မဟုတ်သော ပါရာမီတာအဖြစ် true သို့မဟုတ် false (false သည် ပုံသေအတိုင်း) ကို လက်ခံနိုင်သည်။ ယင်းသည် ပြင်ပအကွာအဝေးများကို ထည့်သွင်းစဉ်းစားမည် မစဉ်းစားမည် အပေါ်မူတည်သည်။ တခါတရံတွင် ရရှိသောတန်ဖိုးများသည် အပိုင်းကိန်းများ ဖြစ်နိုင်သည်။

$(selector).outerWidth([include_margin]);

element ၏ အမြင့်ကို ပြောင်းလဲရန် - နံပါတ်တစ်ခုတည်း (ဥပမာ 400) ကို ပေးပို့နိုင်သည်။ ထိုသို့ဆိုလျှင် တိုင်းတာမှုယူနစ်များသည် ပစ်ကယ်များ ဖြစ်လိမ့်မည်၊ သို့မဟုတ် စာကြောင်း တစ်ခု၊ တိုင်းတာမှုယူနစ်များ သတ်မှတ်ချက်ဖြင့် (ဥပမာ '10em')။

$(selector).outerHeight(အသစ်တန်ဖိုး, [include_margin]);

ထို့အပြင် ကျွန်ုပ်တို့သည် သတ်မှတ်ထားသော function တစ်ခုကို set ထဲရှိ element တစ်ခုချင်းစီအတွက် အသုံးချနိုင်သည်။ ဤသို့ပြုလုပ်သည့်အခါ function သည် ပထမပါရာမီတာအဖြစ် set အတွင်းရှိ element ၏ အစဉ်လိုက်နံပါတ်ကို ရရှိမည်ဖြစ်ပြီး၊ ဒုတိယပါရာမီတာအဖြစ် - သက်ဆိုင်ရာ element အတွက် သတ်မှတ်ထားသော အမြင့်၏ လက်ရှိတန်ဖိုးကို ရရှိမည်။ function အတွင်း this သည် လက်ရှိ element ကို ညွှန်ပြမည်။ element ၏ အမြင့်တန်ဖိုးသည် function က ပြန်ပေးသော တန်ဖိုးသို့ ပြောင်းလဲသွားမည်ဖြစ်သည်။

$(selector).outerHeight(function(set အတွင်းအစဉ်လိုက်နံပါတ်, အမြင့်၏လက်ရှိတန်ဖိုး));

ဥပမာ

နှိုင်းယှဉ်ကြည့်ရန် စာပိုဒ် #test ၏ အမြင့်အကြောင်း အချက်အလက်များကို height, innerHeight နှင့် outerHeight နည်းလမ်းများဖြင့် ရရှိထားသည်များကို ထုတ်ပြကြပါစို့။

<p id="test">စာသား</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

ဤသည်ကိုလည်း ကြည့်ပါ

height နည်းလမ်း,
ယင်းသည် element ၏ အမြင့်ကို ရယူနိုင်ပြီး ပြောင်းလဲနိုင်စေသည်
innerHeight နည်းလမ်း,
ယင်းသည် element ၏ အမြင့်ကို ရယူနိုင်ပြီး ပြောင်းလဲနိုင်စေသည်၊ ၎င်း၏ အတွင်းပိုင်း အကွာအဝေးများကို ထည့်သွင်းစဉ်းစားသည်