javascript - Element's coordinates relative to its parent -

विधि el.getBoundingClientRect () परिणामस्वरूप व्यूपोर्ट के शीर्ष-बायां कोने के सापेक्ष परिणाम देता है ( 0,0 ), किसी तत्व के अभिभावक के सापेक्ष नहीं, जबकि el.offsetTop , el.offsetLeft (आदि) एक परिणाम के सापेक्ष परिणाम देते हैं माता-पिता।

क्या उसके माता पिता के सापेक्ष किसी तत्व के निर्देशांक रखने का सबसे अच्छा अभ्यास है? el.getBoundingClientRect () माता-पिता को (0,0) समन्वय, या फिर el.offsetTop , el.offsetLeft और इतने पर?

आप उपयोग कर सकते हैं getBoundingClientRect () , बस मूल के निर्देशांक घटाकर:।

  वर parentPos = document.getElementById ( 'माता-पिता-आईडी') getBoundingClientRect (), childrenPos = document.getElementById ( 'children- आईडी ')। GetBoundingClientRect (), रिश्तेदार POS = {}; relativePos.top = childrenPos.top - parentPos.top, relativePos.right = childrenPos.right - parentPos.right, relativePos.bottom = childrenPos.bottom - parentPos.bottom, relativePos.left = childrenPos.left - parentPos.left; console.log (relativePos);  

अब आपके पास अपने माता-पिता के सापेक्ष बच्चों के निर्देशांक हैं।

ध्यान दें कि यदि शीर्ष या बायां निर्देशांक नकारात्मक हैं, तो इसका मतलब है कि बच्चों को उस दिशा में अपने माता-पिता से बच जाता है। नीचे या सही निर्देशांक सकारात्मक हैं।

उदाहरण के लिए

 <कोड> वर parentPos = document.getElementById ( 'माता-पिता-आईडी')। getBoundingClientRect (), childrenPos = document.getElementById ( 'बच्चों-आईडी')। getBoundingClientRect (), relativePos = { }; relativePos.top = childrenPos.top - parentPos.top, relativePos.right = childrenPos.right - parentPos.right, relativePos.bottom = childrenPos.bottom - parentPos.bottom, relativePos.left = childrenPos.left - parentPos.left; Console.log (रिश्तेदार फोटो);  

  # parent-id {width: 300px; ऊंचाई: 300px; पृष्ठभूमि: ग्रे; } # Children-id {स्थान: रिश्तेदार; चौड़ाई: 100px; ऊंचाई: 200 पिक्सेल; पृष्ठभूमि: काला; शीर्ष: 50px; बाएं: 100px; }  

  & lt; div id = "parent-id" & gt; & Lt; div id = "children-id" & gt; & lt; / div & gt; & Lt; / div & gt;