Question

我习惯使用jQuery。在我目前的项目中，我使用zepto.js。 Zepto不像jQuery那样提供position()方法。 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);

我只关注我的焦点，但我可以为其他浏览器做类似的事情。

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;

    }
}

当事件目标不是注册事件的元素时，它会将父项的偏移量添加到当前事件偏移量中，以便计算＆＃34;绝对值＆＃34;抵消价值。

根据Mozilla Web API：＆＃34; HTMLElement.offsetLeft 只读属性返回当前元素左上角向左偏移的像素数在HTMLElement.offsetParent节点内。＆＃34;

当您在包含多个子节点的父节点上注册事件时，通常会发生这种情况，例如：带有内部图标或文本跨度的按钮，带有内部跨度的li元素。等...

Answer 5

示例

所以，如果我们有一个id为＆＃34; child-element＆＃34;的子元素我们希望得到它相对于父元素的左/上位置，比如说有一个＆＃34; item-parent＆＃34;类的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));

注意：您可以在mouseClick或mouseover事件
上使用 this
$(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

我有另一个解决方案。从子属性值

中减去父属性值

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

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

7 个答案: