나는 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;

    }
}

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

Mozilla Web API에 따르면 : " HTMLElement.offsetLeft 읽기 전용 속성은 현재 요소의 왼쪽 위 모서리가 HTMLElement.offsetParent 노드 내에서 왼쪽으로 오프셋되는 픽셀 수를 반환 합니다. "

이는 주로 여러 하위 항목이 포함 된 상위에 이벤트를 등록 할 때 발생합니다. 예를 들어 내부 아이콘 또는 텍스트 범위가있는 버튼, 내부 범위가있는 li요소가 있습니다. 기타...

예

따라서 id가 "child-element"인 자식 요소가 있고 "item-parent"클래스가있는 div와 같이 부모 요소에 상대적인 왼쪽 / 상단 위치를 가져 오려면 이 코드를 사용하십시오.

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

플러그인 마지막으로, 실제 플러그인의 경우 (무슨 일이 벌어지고 있는지 설명하는 몇 가지 메모 포함) :

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

다른 해결책이 있습니다. 하위 속성 값에서 상위 속성 값 빼기

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

물론 순수 JS를 사용하면 간단합니다.이 작업을 수행하고 고정 및 애니메이션 HTML 5 패널에서도 작동합니다.이 코드를 만들고 시도하면 모든 브라우저에서 작동합니다 (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>