当body可以相对定位时，如何计算dom元素的页面位置？ [英] How do you calculate the page position of a dom element when the body can be relative positioned?
问题描述
我有一个奇怪的错误，当我使身体是一个相对定位的元素与39px的边距（我正在为一个页面顶部的工具栏空间）开始显示。
无论如何 - 如果你看看大多数网站告诉你计算页面元素的位置，你会看到如下代码：
function getPos（elt）{
var pt = [0，0];
while（elt.offsetParent！== null）{
pt [0] + = elt.offsetLeft;
pt [1] + = elt.offsetTop;
elt = elt.offsetParent;
}
return pt;
}
这很好，即使你的< body>标签有一个边距。但是，如果你的身体也是position：relative，那么返回一个太小的值 - 它不包括body元素的边距。
我如何
注意，我需要页面坐标，所以我需要一个页面坐标。可以将它们与MouseEvent PageX，PageY进行比较。
简短的回答，使用jQuery：
$（elt）.offset（）
这是一个复杂的领域，jQuery有很多代码可以正确处理所有情况（参见 https://github.com/jquery/jquery/blob/master/src/offset.js ）。我认为大多数浏览器支持getClientBoundingRect - 在这种情况下jQuery将使用（但必须调整视口滚动位置）。否则，它调整body的计算风格（yes，$（elt）.css（'margin-left'）将返回计算风格），以及中间元素上的任何边框。
所以，长的答案是 - 除非你想从jQuery或其他框架重新发明100多行代码 - 最好使用他们的代码来获得这个测量，而不是自己写。 / p>
这里是一个提琴手展示一些其他方法（从Snake Faust扩展 - 感谢！）：
http://jsfiddle.net/mckoss/9zLGt/
BTW，Snake，父容器的偏移量是$（elt）.position（）; $（elt）.offset（）返回相对于页面/文档的偏移量 - 这是我在这里寻找的。
I have a weird bug that started showing up when I made the body be a relative positioned element with a 39px margin (I'm making room for a toolbar at the top of a page).
Anyway - if you look at how most sites tell you to compute a page element position, you'll see code like this:
function getPos(elt) { var pt = [0, 0]; while (elt.offsetParent !== null) { pt[0] += elt.offsetLeft; pt[1] += elt.offsetTop; elt = elt.offsetParent; } return pt; }This works fine, even if your <body> tag has a a margin. BUT, if your body is also position:relative, then this returns a value with is too small - it does not include the margins of the body element.
How do I 1) detect if the body is relative positioned, and 2) find our what the margins are so I can add them back in?
Note that I need Page coordinates so I can compare them to MouseEvent PageX, PageY.
解决方案OK, I just did more research on this. The short answer, use jQuery:
$(elt).offset()This is an a complex area that jQuery has a lot of code to handle all the cases correctly (see https://github.com/jquery/jquery/blob/master/src/offset.js). I think most browsers support getClientBoundingRect - in which case jQuery will use that (but has to adjust for viewport scroll position). Otherwise, it adjusts for the computed style of the body (yes, $(elt).css('margin-left') will return the computed style), as well as any borders on intervening elements.
So, the long answer is - unless you want to re-invent the 100+ lines of code from jQuery or other framework - best to get this measurement using their code, rather than write your own.
Here's a fiddler show some of the other methods (expanded from Snake Faust's - thanks!):
http://jsfiddle.net/mckoss/9zLGt/
BTW, Snake, the offset from parent containers is $(elt).position(); $(elt).offset() returns the offset relative to the page/document - which is what I am looking for here.
这篇关于当body可以相对定位时，如何计算dom元素的页面位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
