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

如何使用纯 JS 检索容器相对于父容器的偏移量？

340473 次浏览
小开
最佳答案

element.offsetLeft 和 element.offsetTop给出元素相对于其 offsetParent的位置(offsetParent是最近的父元素，其位置为 relative或 absolute)

小开

在纯 js 中只需使用 offsetLeft和 offsetTop属性。
小提琴示例: < a href = “ http://jsfiddle.net/WKZ8P/”rel = “ norefrer”> 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;


}
}

当事件目标不是注册事件的元素时，它将父事件的偏移量添加到当前事件偏移量，以计算“ Absolute”偏移量值。

根据 Mozilla Web API: “ 左边只读属性返回当前元素左上角为 在 HTMLElement.offsetParent 节点内向左偏移。的像素数

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

小开

纯 JS 当然很简单，只要做到这一点，工作固定和动画 HTML 5面板也，我制作和尝试这个代码，它适用于任何浏览器(包括 IE8) :

<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>
小开

例子

因此，如果我们有一个 id 为“ child-element”的子元素，并且我们想要得到它相对于父元素的左/上位置，比如一个 div，它的类为“ item-father”，我们将使用这段代码。

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

Plugin 最后，对于实际的插件(附带一些说明) :

// 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).offsetRelative("div.item-parent");
小开

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

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

提交答案