부모 컨테이너와 관련된 요소의 위치 / 오프셋을 얻습니까?

부모 컨테이너와 관련된 요소의 위치 / 오프셋을 얻습니까?

---

나는 jQuery로 작업하는 데 익숙합니다. 그러나 현재 프로젝트에서는 zepto.js를 사용합니다. Zepto는 position()jQuery와 같은 방법을 제공하지 않습니다 . Zepto는 offset().

순수한 js 또는 Zepto를 사용하여 부모와 관련된 컨테이너의 오프셋을 검색하는 방법은 무엇입니까?

---

경고 : 표준 JavaScript가 아닌 jQuery

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
}

이것은 부모가 위치하지 않더라도 부모와 관련된 자식의 오프셋을 제공하는 이점이 있습니다.

---

순수 js에서는 사용 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>

---

Internet Explorer에서 이렇게했습니다.

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

나는 내 초점에 따라 IE에만 ​​집중하지만 다른 브라우저에서도 비슷한 일을 할 수 있습니다.

---

이벤트의 절대 오프셋 위치를 얻으려면 이벤트의 오프셋을 상위 요소 오프셋에 추가하십시오.

예 :

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;

    }
}

이벤트 대상이 이벤트가 등록 된 요소가 아닌 경우 "절대"오프셋 값을 계산하기 위해 부모의 오프셋을 현재 이벤트 오프셋에 추가합니다.

According to Mozilla Web API: "The HTMLElement.offsetLeft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node."

This mostly happens when you registered an event on a parent which is containing several more children, for example: a button with an inner icon or text span, an li element with inner spans. etc...

---

Example

So, if we had a child element with an id of "child-element" and we wanted to get it's left/top position relative to a parent element, say a div that had a class of "item-parent", we'd use this code.

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

Plugin Finally, for the actual plugin (with a few notes expalaining what's going on):

// 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));

Note : You can Use this on mouseClick or mouseover Event

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

---

I got another Solution. Subtract parent property value from child property value

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

---

Sure is easy with pure JS, just do this, work for fixed and animated HTML 5 panels too, i made and try this code and it works for any brower (include IE 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>

참고URL : https://stackoverflow.com/questions/11634770/get-position-offset-of-element-relative-to-a-parent-container