jQuery အတွင်း တည်နေရာသတ်မှတ်ခြင်း

jQuery တွင် အရာဝတ္ထုများ၏ ကိုဩဒိနိတ်များနှင့် အလုပ်လုပ်ရန် position နှင့် offset ဟူသော နည်းလမ်းများ ရှိပါသည်။

ဤနည်းလမ်းများသည် လက်ရှိ အရာဝတ္ထု၏ ကိုဩဒိနိတ်များကို ရယူရန် သို့မဟုတ် ပြောင်းလဲရန် အတွက် ဖြစ်ပြီး ရလဒ်အဖြစ် top နှင့် left ဂုဏ်သတ္တိများ ပါဝင်သည့် အရာဝတ္ထုတစ်ခုကို ပြန်ပေးပါသည်။

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

offset နည်းလမ်းသည် အရာဝတ္ထု၏ တည်နေရာကို စာရွက်စာတမ်းနှင့် နှိုင်းယှဉ်၍ ရယူပြီး position နည်းလမ်းသည် အရာဝတ္ထု၏ တည်နေရာကို မိဘ၏ အကွာအဝေး (margin) နှင့် နှိုင်းယှဉ်၍ ရယူပါသည်။

ကျွန်ုပ်တို့တွင် အောက်ပါ HTML ကုဒ်ရှိသည်ဆိုပါစို့:

<div id="parent">
<p id="test">စာသား</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

စာပိုဒ်များတွင် CSS စတိုင်များ ချိတ်ဆက်ထားပါသည်:

#parent {
	width: 150px;
	border: 1px solid blueviolet;
}
#test {
	margin: 5px;
	text-align: center;
	outline: 1px solid green;
}

ယခု test div ၏ တည်နေရာကို ဤနည်းလမ်းများဖြင့် ရယူကြပါစို့၊ ထို့နောက် ရရှိလာသော အရာဝတ္ထု၏ key များကို ကိုးကားကာ ထိုအချက်အလက်ကို အောက်ရှိ စာပိုဒ်များတွင် ရေးထုတ်ပါမည်:

let offset = $('#test').offset();
$('#text1').text(
	'(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
	'(POSITION()) left: ' + position.left + ', top: ' + position.top
);