jQuery: অবস্থান () এবং অফসেট () এর মধ্যে পার্থক্য

178

মধ্যে পার্থক্য কি position()এবং offset()? আমি ক্লিক ইভেন্টে নিম্নলিখিতগুলি করার চেষ্টা করেছি:

console.info($(this).position(), $(this).offset());

এবং তারা ঠিক একইরকম ফিরে আসবে বলে মনে হচ্ছে ... (ক্লিক করা উপাদানটি একটি টেবিলের টেবিলের ঘরে রয়েছে)

jquery positioning

— Svish
সূত্র

215

তারা একই কিনা প্রসঙ্গের উপর নির্ভর করে।

positionঅফসেট পিতামাতার সাথে সম্পর্কিত কোনও {left: x, top: y}বস্তু প্রদান করে
offsetনথির সাথে সম্পর্কিত কোনও {left: x, top: y}বস্তু প্রদান করে ।

স্পষ্টতই, ডকুমেন্টটি যদি অফসেট প্যারেন্ট হয়, যা প্রায়শই হয় তবে এগুলি অভিন্ন হবে। অফসেট পিতা বা মাতা "নিকটতম স্থান ধারণকারী উপাদান।" হয়

উদাহরণস্বরূপ, এই দস্তাবেজ সহ:

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

তারপরে $('#sub').offset() হবে {left: 200, top: 200}, তবে .position()তা হবে {left: 0, top: 0}।

— ডেভিড হেডলুন্ড
সূত্র

2

সুতরাং অফসেট পিতামাতাই কি প্রথম পিতামাতার সাথে পরম স্থানে সেট করা আছে? না?

— Svish

1

@ সুইশ: ওহো, আমি কি কোড ইনডেন্টটি সত্যিই মিস করেছি? সম্পাদনার জন্য ধন্যবাদ। হ্যাঁ, অফসেট পিতামাতাই সবচেয়ে কাছের অবস্থানের পিতামাতা। এটি হল এমন একটি উপাদান যা স্থিতিশীল, আপেক্ষিক বা স্থির (তবে স্থিতিশীল নয়) এ সেট রয়েছে। এটি কোনও jQuery বা জাভাস্ক্রিপ্ট জিনিস নয়, CSS তে আপনার একই আচরণ রয়েছে: আপনি যদি sub0: 0 এ পরম পজিশনটি দিতে থাকেন তবে এটি অফসেট প্যারেন্টের উপরের বাম কোণে থাকবে।

— ডেভিড হেডলুন্ড

1

এফওয়াইআই, .position1.12.0 => github.com/jquery/jquery/issues/1708 এ

— retrovertigo

সহজাত দৃষ্টিভঙ্গির বিপরীত নয়? এতো নির্বিচারে! আমার জন্য একটি পরম "পয়েন্ট" একটি অবস্থান। একটি আপেক্ষিক "পয়েন্ট" একটি অফসেট।

— স্যান্ডবুর্গ

28

। অফসেট () পদ্ধতি আমাদের নথির সাথে সম্পর্কিত কোনও উপাদানটির বর্তমান অবস্থান পুনরুদ্ধার করতে দেয় । এটি পজিশনের () অবস্থানের সাথে বিপরীতে করুন , যা অফসেট পিতামাতার তুলনায় বর্তমান অবস্থানটি পুনরুদ্ধার করে । গ্লোবাল ম্যানিপুলেশন (বিশেষত, ড্রাগ-এন্ড ড্রপ বাস্তবায়নের জন্য) বিদ্যমান কোনটির শীর্ষে একটি নতুন উপাদানকে স্থাপন করার সময়, অফসেট () আরও কার্যকর।

সূত্র: http://api.jquery.com/offset/

— jAndy
সূত্র

3

উপরে জিজ্ঞাসা করা হিসাবে, অফসেট পিতা বা মাতা হিসাবে বিবেচনা করা হয়? মনে হয় যে অন্য ডিভের অভ্যন্তরে প্রথম ডিভের উপর কলিং অবস্থান () সর্বদা 0,0 ফিরে আসে না - এমনকি অন্য কোনও স্টাইলিং বা অবস্থান চলমান থাকা অবস্থায়ও।

— কোকোডোকো

2

jquery.offsetParent (): api.jquery.com/offsetparent "নিকটতম পূর্বপুরুষ উপাদানটি অবস্থিত করুন।"

— কার্টিস ইয়ালাপ

-6

উভয় ফাংশন দুটি বৈশিষ্ট্য সহ একটি সরল বস্তু ফেরত দেয়: প্রস্থ এবং উচ্চতা।

অফসেট () ডকুমেন্টের সাথে সম্পর্কিত অবস্থান বোঝায়।

অবস্থান () এর প্যারেন্ট উপাদানগুলির সাথে সম্পর্কিত অবস্থানকে বোঝায়

কিন্তু যখন অবজেক্টের সিএসএস অবস্থান "পরম" হয় তবে উভয় ফাংশন প্রস্থ = 0 এবং উচ্চতা = 0 ফিরে আসবে

— dwoutsourcing
সূত্র

6

সংশোধন: অফসেট এবং অবস্থান প্রস্থ এবং উচ্চতা নয়, বাম এবং শীর্ষস্থানীয় বৈশিষ্ট্যযুক্ত একটি বস্তু প্রদান করে।

— জর্জি অলিভারেস 12