दिलचस्प पोस्ट
सिस्टम वॉल्यूम IOS प्राप्त करें जारी रखने से पहले पूरा करने के लिए एकाधिक एसिंक्रोनस कॉल की प्रतीक्षा कर रहा है बाश में तार की एक सरणी के माध्यम से लूप? onSaveInstanceState () और onRestoreInstanceState () ज़िप संग्रह के अंदर एक फाइल कैसे पढ़ सकती है मैं स्रोत से एक आर पैकेज कैसे स्थापित करूं? सिक्योर वेब सर्विसेज़: HTTPS बनाम SOAP + WS-Security पर REST। कौनसा अच्छा है? जावा में नामस्थान के साथ XPath क्या पायथन को मशीन कोड में संकलन करना संभव है? अपनी खुद की आयात किए बिना सिस्टम ध्वनि बजाना सीएसएस होवर इवेंट पर, क्या मैं दूसरे डिवा स्टाइल को बदल सकता हूँ? नेस्टेड जेएसओएन ऑब्जेक्ट्स – क्या मुझे हर चीज के लिए एरेज़ का प्रयोग करना पड़ता है? क्यों ब्राउज़र अभी भी HTML5 में <tobody> इंजेक्ट करते हैं? पाठ के मध्य में अंडाकार (मैक शैली) जावा में स्ट्रिंग अपरिवर्तनीय क्यों है?

एक div / span टैग की स्थिति प्राप्त करें

क्या कोई मुझे दिखाता है कि कोई निर्दिष्ट नहीं है जब एक div या span तत्व की top और left स्थिति प्राप्त करने के लिए?

अर्थात:

 <span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span> <span id='12a' onmouseover="GetPos(this);">stuff</span> 

उपरोक्त में, अगर मैं करता हूं:

 document.getElementById('11a').style.top 

55px का मान वापस आ गया है हालांकि, अगर मैं '12 ए' के ​​लिए कोशिश करता हूं, तो कुछ भी वापस नहीं लौटाता

मेरे पास एक पृष्ठ पर div / span का एक गुच्छा है जो मैं top / left गुणों को निर्दिष्ट नहीं कर सकता, लेकिन मुझे सीधे उस तत्व के अंतर्गत एक div प्रदर्शित करना होगा।

वेब के समाधान से एकत्रित समाधान "एक div / span टैग की स्थिति प्राप्त करें"

यह फ़ंक्शन आपको पृष्ठ के सापेक्ष तत्व की एक्स, वाई स्थिति बताएगा। असल में आपको सभी तत्व के माता-पिता के माध्यम से लूप करना होगा और अपने ऑफ़सेट को एक साथ जोड़ना होगा।

 function getPos(el) { // yay readability for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); return {x: lx,y: ly}; } 

हालांकि, यदि आप अपने कंटेनर से संबंधित तत्व की एक्स, वाई स्थिति चाहते हैं, तो आपको केवल सभी की आवश्यकता है:

 var x = el.offsetLeft, y = el.offsetTop; 

इस एक से सीधे एक तत्व डालने के लिए, आपको इसकी ऊंचाई जानने की आवश्यकता होगी इसे ऑफसेटहाइट / ऑफसेटविड्थ प्रॉपर्टी में संग्रहीत किया जाता है

 var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin; 

आप तत्व के संदर्भ पर विधि getBoundingClientRect() को कॉल कर सकते हैं तब आप top , left , right और / या bottom गुणों की जांच कर सकते हैं …

 var offsets = document.getElementById('11a').getBoundingClientRect(); var top = offsets.top; var left = offsets.left; 

यदि jQuery का उपयोग कर रहे हैं, तो आप अधिक संक्षिप्त कोड का उपयोग कर सकते हैं …

 var offsets = $('#11a').offset(); var top = offsets.top; var left = offsets.left; 

जैसा कि एलेक्स ने नोट किया है कि आप दस्तावेज़ प्रवाह के सापेक्ष स्थिति प्राप्त करने के लिए jQuery ऑफसेट () का उपयोग कर सकते हैं। अपने x के लिए स्थिति () का उपयोग करें, y निर्देशांक को माता-पिता के सापेक्ष।

संपादित करें: स्विच document.ready window.load क्योंकि load सभी तत्वों के लिए इंतजार करता है ताकि आप डोम की तैयारी करने के बजाय उनका आकार ले सकें। मेरे अनुभव में, कम गलत तरीके से जावास्क्रिप्ट स्थित तत्वों में load परिणाम।

 $(window).load(function(){ // Log the position with jQuery var position = $('#myDivInQuestion').position(); console.log('X: ' + position.left + ", Y: " + position.top ); }); 

किसी को भी ऊपर या बाईं स्थिति की जरूरत के लिए, @ निकफ के पठनीय कोड को थोड़ा बदलाव चाल करता है।

 function getTopPos(el) { for (var topPos = 0; el != null; topPos += el.offsetTop, el = el.offsetParent); return topPos; } 

तथा

 function getLeftPos(el) { for (var leftPos = 0; el != null; leftPos += el.offsetLeft, el = el.offsetParent); return leftPos; } 

जबकि @ निकफ का उत्तर काम करता है यदि आप पुराने ब्राउज़रों की परवाह नहीं करते हैं, तो आप इस शुद्ध जावास्क्रिप्ट संस्करण का उपयोग कर सकते हैं। IE9 + में काम करता है, और अन्य

 var rect = el.getBoundingClientRect(); var position = { top: rect.top + window.pageYOffset, left: rect.left + window.pageXOffset }; 

मुझे पता है यह एक पुरानी धागा है, लेकिन @लेक्स का उत्तर सही उत्तर के रूप में चिह्नित करने की आवश्यकता है

$(element).offset() jQuery के $(element).offset() के लिए एक सटीक मिलान है $(element).offset()

और यह IE4 + के साथ संगत है … https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect