outerWidth method

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

ဝါကျဖွဲ့ပုံ

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

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

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

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

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

$(selector).outerWidth(function(index, current_value));

ဥပမာ

အဆိုပါစာပိုဒ် #test မှရရှိသော အကျယ်အကြောင်း အချက်အလက်များကို ၎င်း၏ method များဖြစ်သော width၊ innerWidth နှင့် outerWidth တို့ဖြင့် နှိုင်းယှဉ်ကြည့်ကြပါစို့။

<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 w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

အခြားကြည့်ရှုရန်

width method,
ဒြပ်စင်တစ်ခု၏အကျယ်ကိုရယူခြင်း၊ ပြောင်းလဲခြင်းတို့ကို ခွင့်ပြုပေးသည်
innerWidth method,
ဒြပ်စင်တစ်ခု၏ အတွင်းဘက်ပေါက်ကြားမှုများကို ထည့်သွင်းစဉ်းစားကာ အကျယ်ကိုရယူခြင်း၊ ပြောင်းလဲခြင်းတို့ကို ခွင့်ပြုပေးသည်