获取元素相对于父容器的位置/偏移量？

Question

我习惯使用jQuery.在我目前的项目中,我使用zepto.js.Zepto没有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

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

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