एक मूल कंटेनर से संबंधित तत्व की स्थिति/ऑफसेट प्राप्त करें?

Question

मैं jQuery के साथ काम करने के लिए प्रयोग किया जाता है। मेरे वर्तमान प्रोजेक्ट में हालांकि मैं zepto.js का उपयोग करता हूं। ज़िप्टो jQuery की तरह position() विधि प्रदान नहीं करता है। ज़िप्टो केवल offset() के साथ आता है।

कोई विचार है कि मैं शुद्ध जेएस या ज़िप्टो के साथ माता-पिता के सापेक्ष एक कंटेनर के ऑफसेट को कैसे प्राप्त कर सकता हूं?

Answer 1

element.offsetLeft और element.offsetTop अपने offsetParent के संबंध में तत्व की स्थिति खोजने के लिए शुद्ध जावास्क्रिप्ट गुण हैं; relative या absolute

वैकल्पिक रूप से की एक स्थिति के साथ निकटतम पेरेंट तत्व जा रहा है, तो आप हमेशा Zepto का उपयोग एक तत्व और उसके माता पिता की स्थिति प्राप्त करने के लिए कर सकते हैं और दो घटाना:

var childPos = obj.offset(); 
var parentPos = obj.parent().offset(); 
var childOffset = { 
    top: childPos.top - parentPos.top, 
    left: childPos.left - parentPos.left 
} 

यह है माता-पिता को अपने माता-पिता के सापेक्ष किसी बच्चे की ऑफसेट देने का लाभ, भले ही माता-पिता को स्थान नहीं दिया गया हो।

Answer 2

शुद्ध जेएस में बस offsetLeft और offsetTop गुणों का उपयोग करें।
उदाहरण बेला: http://jsfiddle.net/WKZ8P/

var elm = document.querySelector('span'); 
 
console.log(elm.offsetLeft, elm.offsetTop);

p { position:relative; left:10px; top:85px; border:1px solid blue; } 
 
span{ position:relative; left:30px; top:35px; border:1px solid red; }

<p> 
 
    <span>paragraph</span> 
 
</p>

Answer 3

मैं इंटरनेट एक्सप्लोरर में इस तरह किया था।

function getWindowRelativeOffset(parentWindow, elem) { 
    var offset = { 
     left : 0, 
     top : 0 
    }; 
    // relative to the target field's document 
    offset.left = elem.getBoundingClientRect().left; 
    offset.top = elem.getBoundingClientRect().top; 
    // now we will calculate according to the current document, this current 
    // document might be same as the document of target field or it may be 
    // parent of the document of the target field 
    var childWindow = elem.document.frames.window; 
    while (childWindow != parentWindow) { 
     offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left; 
     offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top; 
     childWindow = childWindow.parent; 
    } 

    return offset; 
}; 

=================== आप इस

getWindowRelativeOffset(top, inputElement); 

मैं केवल के रूप में मेरे फोकस प्रति आईई पर ध्यान केंद्रित लेकिन जैसे कि यह कॉल कर सकते हैं अन्य ब्राउज़रों के लिए भी इसी तरह की चीजें की जा सकती हैं।

Answer 4

ईवेंट की पूर्ण ऑफ़सेट स्थिति प्राप्त करने के लिए ईवेंट के ऑफ़सेट को मूल तत्व ऑफ़सेट में जोड़ें।

एक उदाहरण:

HTMLElement.addEventListener('mousedown',function(e){ 

    var offsetX = e.offsetX; 
    var offsetY = e.offsetY; 

    if(e.target != this){ // 'this' is our HTMLElement 

     offsetX = e.target.offsetLeft + e.offsetX; 
     offsetY = e.target.offsetTop + e.offsetY; 

    } 
} 

जब घटना लक्ष्य तत्व जो घटना के लिए पंजीकृत किया गया था नहीं है, यह आदेश "पूर्ण" ऑफसेट की गणना करने के ऑफसेट वर्तमान घटना के लिए माता पिता की भरपाई कहते हैं मूल्य।

मोज़िला वेब एपीआई के अनुसार: "HTMLElement.offsetLeft केवल पढ़ने के लिए संपत्ति पिक्सल है कि वर्तमान तत्व के ऊपरी बाएँ कोने HTMLElement.offsetParent नोड के भीतर छोड़ दिया करने के लिए ऑफसेट है की संख्या देता है।"

यह तब होता है जब आप एक ऐसे माता-पिता पर एक ईवेंट पंजीकृत करते हैं जिसमें कई बच्चे होते हैं, उदाहरण के लिए: आंतरिक आइकन या टेक्स्ट अवधि वाला एक बटन, li तत्व आंतरिक स्पैन के साथ तत्व। आदि...

Answer 5

ज़रूर शुद्ध जे एस करना आसान है, बस इस काम तय की और एनिमेटेड एचटीएमएल 5 पैनल भी मैंने बनाया करते हैं, और इस कोड को कोशिश करते हैं और यह किसी भी ब्राउज़र से लिए काम करता है (आईई 8 में शामिल हैं):

<script type="text/javascript"> 
    function fGetCSSProperty(s, e) { 
     try { return s.currentStyle ? s.currentStyle[e] : window.getComputedStyle(s)[e]; } 
     catch (x) { return null; } 
    } 
    function fGetOffSetParent(s) { 
     var a = s.offsetParent || document.body; 

     while (a && a.tagName && a != document.body && fGetCSSProperty(a, 'position') == 'static') 
      a = a.offsetParent; 
     return a; 
    } 
    function GetPosition(s) { 
     var b = fGetOffSetParent(s); 

     return { Left: (b.offsetLeft + s.offsetLeft), Top: (b.offsetTop + s.offsetTop) }; 
    }  
</script> 

Answer 6

उदाहरण

इसलिए, अगर हमारे पास "बाल-तत्व" की आईडी वाला बच्चा तत्व था और हम मूल तत्व के सापेक्ष इसे बाएं/शीर्ष स्थिति प्राप्त करना चाहते थे, तो एक div जिसमें "आइटम" - माता-पिता ", हम इस कोड का उपयोग करेंगे।

var position = $("#child-element").offsetRelative("div.item-parent"); 
alert('left: '+position.left+', top: '+position.top); 

प्लगइन अंत में, वास्तविक प्लगइन के लिए (कुछ नोट expalaining क्या हो रहा है के साथ):

// offsetRelative (or, if you prefer, positionRelative) 
(function($){ 
    $.fn.offsetRelative = function(top){ 
     var $this = $(this); 
     var $parent = $this.offsetParent(); 
     var offset = $this.position(); 
     if(!top) return offset; // Didn't pass a 'top' element 
     else if($parent.get(0).tagName == "BODY") return offset; // Reached top of document 
     else if($(top,$parent).length) return offset; // Parent element contains the 'top' element we want the offset to be relative to 
     else if($parent[0] == $(top)[0]) return offset; // Reached the 'top' element we want the offset to be relative to 
     else { // Get parent's relative offset 
      var parent_offset = $parent.offsetRelative(top); 
      offset.top += parent_offset.top; 
      offset.left += parent_offset.left; 
      return offset; 
     } 
    }; 
    $.fn.positionRelative = function(top){ 
     return $(this).offsetRelative(top); 
    }; 
}(jQuery)); 

नोट: आप माउस क्लिक या माउसओवर पर इस का उपयोग कर सकते हैं घटना

$(this).offsetRelative("div.item-parent"); 

Answer 7

मुझे एक और समाधान मिला। बाल संपत्ति मूल्य से माता-पिता संपत्ति मूल्य घटाएं

$('child-div').offset().top - $('parent-div').offset().top;