jQuery-তে অবস্থান নির্ণয়

jQuery-তে এলিমেন্টের স্থানাঙ্ক নিয়ে কাজ করার জন্য এখানে position এবং offset মেথড রয়েছে।

এই মেথডগুলি এলিমেন্টের বর্তমান স্থানাঙ্ক পাওয়া বা পরিবর্তন করার জন্য ব্যবহৃত হয় এবং ফলাফল হিসেবে একটি অবজেক্ট রিটার্ন করে, যাতে top এবং left প্রপার্টি থাকে।

গণনায় ত্রুটি দেখা দিতে পারে যদি ব্যবহারকারী পৃষ্ঠার আকার পরিবর্তন করে। এছাড়াও মেথডগুলি লুকানো এলিমেন্টের স্থানাঙ্ক পায় না।

offset মেথডটি ডকুমেন্টের সাপেক্ষে এলিমেন্টের অবস্থান পায়, এবং position মেথডটি প্যারেন্টের মার্জিনের সাপেক্ষে এলিমেন্টের অবস্থান পায়।

ধরি আমাদের কাছে নিম্নলিখিত HTML কোড আছে:

html<div id="parent">
<p id="test">text</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

প্যারাগ্রাফগুলিতে CSS স্টাইল প্রয়োগ করা হয়েছে:

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

আসুন test ডিভের অবস্থান এই মেথডগুলি দিয়ে পাই, এবং প্রাপ্ত অবজেক্টের কীগুলিতে অ্যাক্সেস করে, এই তথ্যটি নীচের প্যারাগ্রাফে আউটপুট করি:

javascriptlet 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
);