获取元素相对于父容器的位置/偏移量？
获取元素相对于父容器的位置/偏移量？
提问于 2012-07-24 23:58:23
我习惯于使用jQuery。然而，在我当前的项目中，我使用的是zepto.js。Zepto不像jQuery那样提供position()方法。Zepto只有offset()自带。
知道如何使用纯js或Zepto检索容器相对于父容器的偏移量吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-07-25 00:02:12
警告: jQuery，不是标准JavaScript
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
}这样做的好处是，即使父对象没有定位，也可以给出子对象相对于其父对象的偏移量。
Stack Overflow用户
发布于 2012-07-25 00:02:46
在纯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>
Stack Overflow用户
发布于 2013-10-08 16:15:16
我在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，但其他浏览器也可以做类似的事情。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11634770
复制相关文章
相似问题
腾讯云开发者
