相对元件的获取位置/偏移到一个父容器？(Get position/offset of element

我已经习惯了使用jQuery。 在我当前的项目，但是我用zepto.js。 仄不提供position()等jQuery不会方法。 的Zepto只配备了offset()

任何想法，我怎么可以检索容器相对于纯JS或一个的Zepto父的偏移？

Answer 1:

element.offsetLeft和element.offsetTop可用于查找与相对于它的元素的位置的纯javascript属性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:

在纯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> 

Answer 3:

我没有像这样在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浏览器只是按我的焦点，但类似的事情可以为其他浏览器来完成。

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;

    }
}

当事件目标不是该事件被注册到元件，它增加了偏移的父的当前事件，以便计算“绝对”的偏移值的偏移。

据Mozilla的Web API道：“HTMLElement.offsetLeft只读属性返回当前元素的左上角偏移到HTMLElement.offsetParent节点内左侧的像素数。”

与内部图标或文本范围，一个按钮：当你注册在其上包含了更多的孩子，比如家长的事件这主要发生li有内跨度元素。 等等...

Answer 5:

例

所以，如果我们有一个子元素与“儿童元素”的ID，我们希望得到它的左/相对于父元素顶部位置，说的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 6:

当然是很容易用纯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>

Answer 7:

我得到了另一种解决方案。 从子属性值中减去parent属性值

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

文章来源: Get position/offset of element relative to a parent container?