jQuery ရှိ width နှင့် height method များ

width နဲ့ height method တွေဟာ element ရဲ့ အကြောင်းအရာ (content) ၏ အနံနှင့် အမြင့်ကို သက်ဆိုင်ရာ padding, border နဲ့ margin တို့ကို မထည့်တွက်ဘဲ ရယူပေးပါတယ်။

ဒီတော့ အတွဲ #test ရဲ့ အနံနှင့် အမြင့် တန်ဖိုးတွေကို ရယူပြီး ဒီတန်ဖိုးတွေကို အခြားအတွဲတစ်ခုမှာ ဖော်ပြကြည့်ရအောင်။ ဥပမာအနေနဲ့ အောက်ပါ HTML ကုဒ်ကို ယူထားပါတယ်။

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

အတွဲရဲ့ CSS style က ဒီလိုပုံစံဖြစ်ပါတယ်။

p {
	margin: 10px;
	padding: 5px;
}

အခု Javascript ကုဒ်ကို ရေးသားပါမယ်။

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

ဒီ method တွေကို သုံးပြီး element တွေရဲ့ အနံနှင့် အမြင့် တန်ဖိုးတွေကို လွယ်လွယ်ကူကူ ပြောင်းလဲပေးနိုင်ပါတယ်။ ဥပမာ၊ div #test1 ရဲ့ အနံကို 250px နဲ့ div #test2 ရဲ့ အမြင့်ကို 200px ထားကြည့်ရအောင်။

$('#test1').width(250);
$('#test2').height(200);

ကျွန်ုပ်တို့မှာ ဒီလို markup ရှိပါတယ်။

<div id="wrapper">
<div id="test">စာသား</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

အောက်ပါ CSS style များ။

div {
margin: 10px;
padding: 5px;
border: 2px solid green;
}
#wrapper {
border-color: blueviolet;
}

div #wrapper ရဲ့ အနံနှင့် အမြင့် တန်ဖိုးများကို margin နဲ့ border တွေ မထည့်တွက်ဘဲ ရယူပါ။ ရရှိလာတဲ့ တန်ဖိုးတွေကို ဒီ div အောက်က ပထမဆုံး အတွဲမှာ �ော်ပြပါ။