2010-07-08 23 views
160

के बीच अंतर position() और offset() के बीच क्या अंतर है? मैं एक क्लिक करें घटना में निम्नलिखित करने की कोशिश की:jQuery: स्थिति() और ऑफसेट()

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

और वे वास्तव में वापस जाने के लिए लग रहे हैं एक ही ... (क्लिक किए गए तत्व किसी तालिका में एक मेज सेल के भीतर है)

उत्तर

194

यही कारण है कि संदर्भ तत्व में है पर निर्भर करता है position रिटर्न ऑफसेट माता पिता को स्थिति रिश्तेदार, और offset दस्तावेज़ के लिए एक ही रिश्तेदार है। जाहिर है, अगर दस्तावेज़ ऑफसेट माता-पिता है, जो प्रायः मामला होता है, तो यह समान होगा।

आप इस प्रकार का लेआउट, तथापि हों:

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

फिर offsetउप के लिए 200 हो जाएगा: 200 है, लेकिन इसकी position 0 हो जाएगा: 0।

+2

तो ऑफसेट माता-पिता पहले माता-पिता को पूर्ण स्थिति के साथ सेट किया गया है? या? – Svish

+1

@ स्विस: व्हाओ, क्या मुझे वास्तव में कोड इंडेंट याद आया? संपादन के लिए thaks। हां, ऑफसेट माता-पिता निकटतम * स्थित * माता-पिता है। यानी, पूर्ण, सापेक्ष या निश्चित (लेकिन स्थैतिक नहीं) पर सेट स्थिति वाला एक तत्व है। यह एक jQuery या यहां तक ​​कि एक जावास्क्रिप्ट चीज नहीं है, आपके पास सीएसएस में एक ही व्यवहार है: यदि आप 0: 0 पर 'उप' पूर्ण स्थिति देना चाहते हैं, तो यह ऑफसेट माता-पिता के ऊपरी बाएं कोने में होगा। –

+0

बहुत बढ़िया, तो यह पूरी तरह से समझ में आता है! (संपादन के साथ कोई समस्या नहीं, हे। मैं इसे हर समय करता हूं: पी) – Svish

27

.offset() विधि हमें दस्तावेज़ के सापेक्ष तत्व की वर्तमान स्थिति पुनर्प्राप्त करने की अनुमति देती है। .position() के साथ इसकी तुलना करें, जो ऑफसेट पैरेंट के सापेक्ष वर्तमान स्थिति पुनर्प्राप्त करता है। ग्लोबल हेरफेर (विशेष रूप से, ड्रैग-एंड-ड्रॉप को लागू करने के लिए) के लिए किसी मौजूदा तत्व के शीर्ष पर एक नया तत्व पोजिशन करते समय, .offset() अधिक उपयोगी होता है।

स्रोत:। http://api.jquery.com/offset/

+3

जैसा कि ऊपर से पूछा, ऑफ़सेट माता-पिता को क्या माना जाता है? ऐसा लगता है कि दूसरे div के अंदर पहले div पर कॉलिंग स्थिति() हमेशा 0,0 नहीं लौटाती है - भले ही कोई अन्य स्टाइल या पोजीशनिंग न हो। – Kokodoko

+2

jquery.offset अभिभावक(): http://api.jquery.com/offsetparent/ "स्थित निकटतम पूर्वजों तत्व प्राप्त करें।" –

-7

दोनों कार्य दो गुणों के साथ एक सादा वस्तु वापस करते हैं: चौड़ाई & ऊंचाई।

ऑफ़सेट() दस्तावेज़ से संबंधित स्थिति को संदर्भित करता है।

स्थिति() अपनी मूल तत्व

सापेक्ष स्थिति को दर्शाता है, लेकिन वस्तु के सीएसएस स्थिति है जब "पूर्ण" दोनों कार्यों वापस आ जाएगी चौड़ाई = 0 & ऊंचाई = 0

+5

सुधार में अपडेट किया गया : ऑफ़सेट और स्थिति बाएं और शीर्ष गुणों वाली वस्तु को चौड़ाई और ऊंचाई नहीं देती है। –

संबंधित मुद्दे