获取带有边距的主体元素的左上偏移：自动答案

【问题标题】：Getting left and top offset for body element with margin:auto获取带有边距的主体元素的左上偏移：自动
【发布时间】：2012-04-30 20:19:37
【问题描述】：

我正在尝试获取一个网站的鼠标相对于 body 的位置（即 body = 坐标原点），该网站的 body 元素大小固定并使用 margin:auto CSS 属性居中。

由于 event.clientX 和 event.clientY 属性给了我从页面开始的偏移量，而不是从 body 元素，我试图减去它的 body 偏移量。为此，我尝试使用 document.body.offsetLeft 和 document.body.offsetTop，但到目前为止没有运气，该值未定义。另外，由于我没有定义它，所以我不能使用 document.body.style.left 或 document.body.style.top。

有没有人知道一种方法来获取主体偏移量或直接获取鼠标相对于 DOM 元素的坐标？

提前谢谢你！

【问题讨论】：

标签： javascript dom mouseevent

【解决方案1】：

使用element.getBoundingClientRect() 获取元素的相对偏移量：

var bodyOffsets = document.body.getBoundingClientRect();
//bodyOffsets.top   ;
//bodyOffsets.left  ;

【讨论】：

嘿，谢谢！ :P 不知道可以直接获取渲染位置。现在我觉得通过循环遍历整个层次来计算相对于身体的位置很愚蠢......
@gaspercat 要获得一致的跨浏览器解决方案，请参阅this answer。

【解决方案2】：

使用 Jquery 方法 position() - 检索相对于偏移父级的当前位置。

【讨论】：

这似乎是一个不错的选择。我会记住这一点，但在这种情况下，我不会在项目的其他任何地方使用 Jquery。