113

दस्तावेज़ / निकाय / ब्राउज़र विंडो के सापेक्ष तत्वों की स्थिति निर्धारित करने का सबसे आसान तरीका क्या है?

अभी मैं उपयोग कर रहा हूं .offsetLeft/offsetTop, लेकिन यह विधि केवल आपको मूल तत्व के सापेक्ष स्थिति देती है, इसलिए आपको यह निर्धारित करने की आवश्यकता है कि शरीर के तत्व को कितने माता-पिता हैं, जिससे शरीर / ब्राउज़र विंडो / दस्तावेज़ की स्थिति से संबंधित स्थिति का पता चल सके।

यह तरीका भी बोझिल है।

javascript dom

— आइंस्टाइन
स्रोत

58

आप offsetParentDOM के टॉप लेवल तक अपडाउन कर सकते हैं ।

function getOffsetLeft( elem )
{
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

— KeatsKelleher
स्रोत

28

नहीं, यह नहीं है, जब किसी भी माता-पिता (विशेष रूप से html तत्व !!!) के पास मार्जिन, पैडिंग या सीमाएं हैं।

— फ्लैश थंडर

मार्जिन सामान के बारे में ... यह बॉक्स-साइज़िंग को बॉर्डर-बॉक्स में सेट करने में मदद कर सकता है ... या उन पंक्तियों के साथ कुछ ... कुछ भी तय नहीं किया जा सकता है ...

पहले, आपको यह तय करने की आवश्यकता है कि बॉक्स-साइज़िंग के अनुसार सीमा और मार्जिन का हिसाब लेना है या नहीं। दूसरा, ध्वस्त मार्जिन पर विचार किया जाना चाहिए। और अंतिम, भविष्य में और अधिक जटिल स्थिति होगी जो इस उत्तर को बदतर बना देगी।

— xianshenglu

6

यह स्वीकृत उत्तर क्यों है? यह पुराना और खराब प्रदर्शन है। अपने आप को एक एहसान करो और getBoundingClientRect () का उपयोग अन्य उत्तरों में सुझाए अनुसार करें।

— फेबियन वॉन एलर्ट्स

177

आप इस तरह DOM को ट्रेस किए बिना शीर्ष और बाएं जा सकते हैं :

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}

— तुलसी
स्रोत

6

यह उत्तर माता-पिता की संतानों को ध्यान में नहीं रखता है। यह केवल व्यूपोर्ट के सापेक्ष है

— Nickey

3

@ निक्की जो सच नहीं है - व्यूपोर्ट पोजीशन, और स्क्रॉल ऑफ़सेट चेक, पूरे दस्तावेज़ के सापेक्ष निर्देशांक प्राप्त करते हैं।

— नाचिटिका 13

1

मोबाइल उपकरणों पर छोटी गाड़ी हो सकती है stackoverflow.com/a/32623832/962634 अनुसंधान की आवश्यकता

— तुलसी

1

आप क्‍लाइंट टॉप / क्‍लाइंट लिफ़्ट को क्‍यों घटाते हैं?

— तेमोह

1

@Teemoh clientTop / clientLeft <html>तत्व पर सीमा मानों से मेल खाता है ।

— राफेल राफतपनह

98

आप element.getBoundingClientRect()व्यूपोर्ट के सापेक्ष तत्व स्थिति को पुनः प्राप्त करने के लिए उपयोग कर सकते हैं ।

फिर document.documentElement.scrollTopव्यूपोर्ट ऑफसेट की गणना करने के लिए उपयोग करें।

दोनों का योग दस्तावेज़ के सापेक्ष तत्व स्थिति देगा:

element.getBoundingClientRect().top + document.documentElement.scrollTop

— dy_
स्रोत

10

व्यूपोर्ट के सापेक्ष दस्तावेज़ के सापेक्ष समान नहीं है। यदि पृष्ठ थोड़ा नीचे स्क्रॉल किया जाता है, तो व्यूपोर्ट के शीर्ष शीर्ष दस्तावेज़ के शीर्ष रिश्तेदार की तुलना में एक छोटी संख्या होगी।

— MrVimes

14

वह व्यूपोर्ट के सापेक्ष शुरू होता है और इसे दस्तावेज़ के सापेक्ष प्राप्त करने के लिए स्क्रॉल जोड़ता है।

— जोकिन क्यूनेका अबला

2

document.documentElement.scrollTopसफारी में काम नहीं करता है, window.scrollYइसके बजाय का उपयोग करें

— फैबियन वॉन एलर्ट्स

7

मैं उपयोग करने का सुझाव देता हूं

element.getBoundingClientRect()

के रूप में प्रस्तावित यहाँ के माध्यम से मार्गदर्शन ऑफसेट गणना के बजाय offsetLeft , offsetTop और offsetParent । जैसा कि यहां प्रस्तावित है कुछ परिस्थितियों में * मैनुअल ट्रैवर्सल अमान्य परिणाम उत्पन्न करता है। इस प्लंकर को देखें: http://plnkr.co/pC8Kgj

* जब तत्व स्थैतिक (= डिफ़ॉल्ट) स्थिति वाले स्क्रॉल करने योग्य माता-पिता के अंदर होता है।

— Hanis
स्रोत

आप स्क्रॉल गणना और स्क्रॉलटॉप को इसमें शामिल करके ऑफ़सेट गणना कार्य भी कर सकते हैं।

— बेन जे।

लेकिन मैंने पाया offsetLeftऔर offsetTopCSS3 के परिवर्तनों को ध्यान में नहीं रखा, जो getBoundingClientRect()करता है। तो यह एक मामला है परिणाम अमान्य हो सकते हैं। यदि आपको इसकी आवश्यकता है, तो आप माता-पिता (जैसे offsetLeft) के सापेक्ष एक तत्व की ऑफसेट प्राप्त कर सकते हैं (element.getBoundingClientRect().left - parent.getBoundingClientRect().left)।

— बेन जे।

डिफ को ऊंचा उठना चाहिए; ये मूल्य कहीं अधिक उपयोगी हैं, और सभी एक कॉल में भी!

— मिश्रण

7

document-offset( तृतीय-पक्ष लिपि ) दिलचस्प है और यह अन्य उत्तरों से दृष्टिकोण का लाभ उठाने के लिए लगता है।

उदाहरण:

var offset = require('document-offset')
var target = document.getElementById('target')
console.log(offset(target))
// => {top: 69, left: 108}

— मैथ्यू एम-गोसलिन
स्रोत

5

मैंने ऑफसेट-अप / ऑफसेटलेफ्ट की यात्रा करने वाले एज मामलों से निपटने के लिए निम्नलिखित विधि को सबसे विश्वसनीय माना है।

function getPosition(element) {
    var clientRect = element.getBoundingClientRect();
    return {left: clientRect.left + document.body.scrollLeft,
            top: clientRect.top + document.body.scrollTop};
}

— रॉबिन स्टीवर्ट
स्रोत

4

उन लोगों के लिए जो दस्तावेज़ के सापेक्ष एक तत्व के विभिन्न पदों के x और y निर्देशांक प्राप्त करना चाहते हैं।

const getCoords = (element, position) => {
  const { top, left, width, height } = element.getBoundingClientRect();
  let point;
  switch (position) {
    case "top left":
      point = {
        x: left + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "top right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + window.pageYOffset
      };
      break;
    case "center left":
      point = {
        x: left + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "center right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height / 2 + window.pageYOffset
      };
      break;
    case "bottom left":
      point = {
        x: left + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom center":
      point = {
        x: left + width / 2 + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
    case "bottom right":
      point = {
        x: left + width + window.pageXOffset,
        y: top + height + window.pageYOffset
      };
      break;
  }
  return point;
};

प्रयोग

getCoords(document.querySelector('selector'), 'center')
getCoords(document.querySelector('selector'), 'bottom right')
getCoords(document.querySelector('selector'), 'top center')

— राफेल रफतपनह
स्रोत

2

यदि आपको jQuery का उपयोग करने में कोई आपत्ति नहीं है, तो आप offset()फ़ंक्शन का उपयोग कर सकते हैं । यदि आप इस फ़ंक्शन के बारे में अधिक पढ़ना चाहते हैं, तो दस्तावेज़ देखें ।

— एडम
स्रोत

1

http://www.quirksmode.org/js/findpos.html इसे करने का सबसे अच्छा तरीका बताते हैं, सभी में, आप सही रास्ते पर हैं, आपको अपने माता-पिता के पेड़ को ढूंढना होगा।

— जेक कालस्टैड
स्रोत

दस्तावेज़ के सापेक्ष तत्व की स्थिति का पता लगाना

उदाहरण:

प्रयोग