offset পদ্ধতি

offset পদ্ধতি ডকুমেন্টের সাপেক্ষে উপাদানের অবস্থান পাওয়ার অনুমতি দেয়, position পদ্ধতির বিপরীতে, যা প্যারেন্টের মার্জিনের সাপেক্ষে স্থানাঙ্ক পায়। offset পদ্ধতি বেশি উপযোগী যখন বিদ্যমান উপাদানের উপরে নতুন উপাদান স্থাপন করা হয় গ্লোবাল ম্যানিপুলেশনের জন্য, উদাহরণস্বরূপ, drag-and-drop বাস্তবায়নের জন্য। এর ফলাফল হিসেবে, পদ্ধতিটি একটি অবজেক্ট রিটার্ন করে, যাতে top এবং left বৈশিষ্ট্য থাকে। গণনায় ত্রুটি দেখা দিতে পারে যদি ব্যবহারকারী পৃষ্ঠার আকার পরিবর্তন করে। এছাড়াও পদ্ধতিটি লুকানো উপাদানগুলির স্থানাঙ্ক পায় না।

সিনট্যাক্স

বর্তমান স্থানাঙ্ক পাওয়া। কিছু ক্ষেত্রে প্রাপ্ত মানগুলি ভগ্নাংশ হতে পারে:

$(সিলেক্টর).offset();

উপাদানের স্থানাঙ্ক পরিবর্তন করতে, আপনাকে একটি অবজেক্ট পাস করতে হবে, যাতে top এবং left বৈশিষ্ট্য থাকে:

$(সিলেক্টর).offset({top: 40, left: 40});

আমরা সেটের প্রতিটি উপাদানে একটি নির্দিষ্ট ফাংশন প্রয়োগ করতে পারি। এক্ষেত্রে ফাংশনটি প্রথম প্যারামিটার হিসেবে সেটে উপাদানের ইনডেক্স পাবে, এবং দ্বিতীয় প্যারামিটার হিসেবে top এবং left সহ স্থানাঙ্কের একটি অবজেক্ট পাবে। ফাংশনের ভিতরে this বর্তমান উপাদানকে নির্দেশ করবে। উপাদানের স্থানাঙ্কের মানগুলি সেই মানগুলিতে পরিবর্তিত হবে, যেগুলি ফাংশন দ্বারা রিটার্ন করা হয়:

$(সিলেক্টর).width(function(সেটে ইনডেক্স, {বর্তমান স্থানাঙ্ক}));

উদাহরণ

আসুন offset পদ্ধতি ব্যবহার করে ডিভের (সবুজ বর্গক্ষেত্র) অবস্থান পাই, এবং তারপর প্রাপ্ত অবজেক্টের কীগুলিতে অ্যাক্সেস করে এই তথ্যটি আউটপুট করি:

<div id="result">বর্গক্ষেত্রে ক্লিক করুন ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

উদাহরণ

আসুন দ্বিতীয় প্যারাগ্রাফের স্থানাঙ্ক পরিবর্তন করি:

<p style="margin-left: 10px;">টেক্সট ১</p>
<p style="margin-left: 10px;">টেক্সট ২</p>

$('p').last().offset({top: 40, left: 60});

আরও দেখুন

position পদ্ধতি,
যা উপাদানের বর্তমান স্থানাঙ্ক পাওয়ার অনুমতি দেয়
offsetParent পদ্ধতি,
যা উপাদানের নিকটতম পজিশনকৃত প্যারেন্ট পাওয়ার অনুমতি দেয়
css পদ্ধতি,
যা উপাদানের CSS স্টাইল পাওয়া এবং পরিবর্তন করার অনুমতি দেয়