获取元素相对于父容器的位置/偏移量
Get position/offset of element relative to a parent container?
如何使用纯JS检索容器相对于父级的偏移量?
element.offsetLeft
和element.offsetTop
给出元素相对于其offsetParent
(位置为relative
或absolute
的最近父元素)的位置
在纯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>
我在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;
}
}
当事件目标不是事件注册到的元素时,它会将父对象的偏移量添加到当前事件偏移量中,以计算"绝对"偏移量值。
根据Mozilla Web API:"HTMLElement.offsetLeft只读属性返回当前元素左上角在HTMLElement.ooffsetParent节点内向左偏移的像素数。"
这种情况主要发生在您在包含多个子项的父项上注册事件时,例如:具有内部图标或文本跨度的按钮,具有内部跨度的li
元素。等等。
我得到了另一个解决方案。从子属性值减去父属性值
$('child-div').offset().top - $('parent-div').offset().top;
示例
因此,如果我们有一个id为"的子元素;子元素";我们想得到它相对于父元素的左/顶部位置,比如一个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 Event 上使用此
$(this).offsetRelative("div.item-parent");
使用纯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>
- 添加新数据时D3.JS条形图列偏移量
- 当偏移量改变时滚动顶部
- 引导数据偏移量底部
- 可以在调整窗口大小时重新调整stellar.js的元素偏移量
- 可滚动元素,如何在调整大小时更改顶部偏移量
- 使用JavaScript日期的任何时间的时区偏移量
- jQuery根据鼠标位置计算DIV偏移量和边界
- 如何使用javascript获取&使用字符偏移量设置插入符号位置
- 获取元素相对于父容器的位置/偏移量
- 为所有哈希链接/调用的滚动位置添加自动偏移量
- jQuery:偏移量和位置返回相同的值
- 如何获取元素与当前屏幕位置的偏移量
- 正在获取元素位置/偏移量
- 获取元素偏移量在设置位置之前返回相同的值:绝对值
- 如何获得窗口的偏移量's在jQuery中的滚动位置
- 窗口.位置(加上Y偏移量)选项
- 使用jQuery将元素对齐到鼠标位置有一个偏移量
- Angular - ui-router - directive -获取指令的偏移量/位置
- 如何正确获取DOM元素的位置偏移量
- Jquery UI位置:顶部偏移量错误