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

Question

我习惯于使用jQuery。在我目前的项目中，我使用zepto.js。 Zepto不提供像jQuery那样的position()方法。 Zepto只附带offset()。

任何想法如何检索容器相对于纯js或Zepto的父母的偏移？

Answer 1

element.offsetLeft和element.offsetTop是用于查找元素相对于其offsetParent的位置的纯javascript属性;是用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万维网API道：“HTMLElement.offsetLeft只读属性返回像素，所述当前元素的左上角是偏移到HTMLElement.offsetParent节点内的左数量”。

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

Answer 5

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

示例

所以，如果我们有一个id为“child-element”的子元素，并且我们想要获得它相对于父元素的左/顶位置，比如说一个具有“item我们会使用这个代码。

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 7

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

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