डिव / स्पैन टैग की स्थिति प्राप्त करें

Question

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

अर्थात:

<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लौटाया जाता है। हालांकि, अगर मैं span'12 ए' के लिए कोशिश करता हूं , तो कुछ भी नहीं मिलता है।

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

Answer 1

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

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};
}

हालाँकि, यदि आप इसके कंटेनर के सापेक्ष तत्व की x, y स्थिति चाहते हैं, तो आपको बस इसकी आवश्यकता है:

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

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

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

Comments

दुर्भाग्य से यह विधि क्रोम में विफल हो जाती है जब तत्व सीमा के साथ एक तालिका के अंदर होता है। यह बॉडी मार्जिन के कारण IE6 मानकों मोड में भी विफल हो जाएगा।

— GetFree

इस कोड के उपयोगकर्ताओं के लिए बस एक चेतावनी। यह पृष्ठ के सापेक्ष है न कि खिड़की के लिए। यदि उपयोगकर्ता स्क्रॉलबार का उपयोग करते हुए चारों ओर स्क्रॉल करता है तो यह समान मान लौटाता है। सावधान रहे।

— आइजैक बोलिन्जर

धन्यवाद @IsaacBolinger ने अभी देखा। क्या कोई मुझे बता सकता है कि विंडो के आकार बदलने या उपयोगकर्ता को स्क्रॉल करने पर मुझे यह कैसे बदल सकता है?

— डेविड फरिना

@ DavidFariña मैंने इसके लिए डोजो के ज्यामिति मॉड्यूल "डोम-ज्योमेट्री" का उपयोग किया। मुझे नहीं पता कि इसे कैसे करना है।

— इसहाक बोलिंजर

डाउनवोटेड - यह अधिक अनुभवी उपयोगकर्ताओं के लिए स्पष्ट हो सकता है, लेकिन आपने निर्दिष्ट नहीं किया है कि वास्तव में एल के लिए पारित होने की क्या आवश्यकता है (अर्थात नमूना उपयोग प्रदान करें)।

— मैट

Answer 2

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

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

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

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

Comments

इस उत्तर के लिए +1 का getBoundingClientRect()उपयोग किया जाना चाहिए - और यह स्वीकृत उत्तर होना चाहिए! लेकिन इसके लिए आपको "आधुनिक ब्राउज़र" की आवश्यकता नहीं है , कार्य करने के लिए जो संगतता सूची मैंने यहाँ दिखाई है, उसे देखें: stackoverflow.com/questions/1480133/… । यह IE 4.0+ (!), Chrome 1.0+, FF 3.0+, Safari 4.0+ और ओपेरा में ठीक काम करता है।

— Sk8erPeter

ध्यान दें कि getBoundingClientRect()व्यूपोर्ट के सापेक्ष मान लौटाता है, दस्तावेज नहीं। उसके लिए, आप कुछ ऐसा चाहते हैं top = el.getBoundingClientRect().top + window.pageYOffset - el.ownerDocument.documentElement.clientTop।

— जैक ब्लूम

यह भी ध्यान रखें कि getBoundingClientRectलेता है transformखाते में।

— ExpExc

यह सही नहीं है अगर पहले गैर-बिल्कुल-तैनात बच्चे के पास मार्जिन-टॉप या मार्जिन-लेफ्ट है। वर्तमान में इस पृष्ठ पर कोई सटीक समाधान नहीं है, इसलिए यदि कोई जानता है, तो कृपया उत्तर दें।

— कर्टिस

Answer 3

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

var rect = el.getBoundingClientRect();

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

Answer 4

जैसा कि एलेक्स ने उल्लेख किया है कि आप दस्तावेज़ प्रवाह के सापेक्ष स्थिति प्राप्त करने के लिए 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 );
});

Answer 5

किसी को भी सिर्फ शीर्ष या बाएं स्थान की आवश्यकता है, @ Nickf के पठनीय कोड में मामूली संशोधन चाल करता है।

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;
}

Answer 6

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

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

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

Comments

आपको पेज स्क्रॉल ऑफ़सेट शामिल करना होगा

— बेंजामिन इंटल