在JS中获取对象的坐标答案

【问题标题】：Getting coordinates of objects in JS在JS中获取对象的坐标
【发布时间】：2012-01-28 08:50:04
【问题描述】：

所以基于this question 我问，获取跨浏览器对象位置的最可靠方法是什么？谢谢

【问题讨论】：

jQuery 的position()?它适用于 DOM 元素、document 对象和 window 对象，因此您已被覆盖。

【解决方案1】：

一般来说，假设您有一个名为 elem 的元素，那么实际上很容易获得一个元素左上角的 X 和 Y 坐标，假设您希望这些在文档坐标中。在所有浏览器中，这是由 elem.offsetLeft 和 elem.offsetTop 属性返回的。

您必须注意的唯一技巧是，如果 elem 绝对定位在另一个元素中，例如左/上边距为 20 像素的 div，这些属性将返回 0，因为它只考虑考虑当前元素而不是整个元素链。幸运的是，我们可以使用“链遍历”函数来捕获与给定元素关联的元素的所有边距，将它们汇总以获得正确的文档坐标。

正如 Sime Vidas 所提到的，还有 JQuery 的 position() 和 offset() 属性，在这种情况下，您需要 offset() 属性。

您也可以使用getBoundingClientRect() 方法，但是这会返回元素相对于其offsetParent 的坐标，因此并不完全可靠。请看以下示例：

// getPosition function
function getPosition(elem){

    var dims = {offsetLeft:0, offsetTop:0};

    do {
        dims.offsetLeft += elem.offsetLeft;
        dims.offsetTop += elem.offsetTop;
    }

    while (elem = elem.offsetParent);

    return dims;
}

cont1.style.position = "absolute";
cont1.style.marginLeft = "10px";

cont2.style.position = "absolute";
cont2.style.marginLeft = "10px";

box.style.position = "absolute";
box.style.marginLeft = "10px";


console.log(getPosition(box).offsetLeft); // returns "30"
console.log(getPosition(box).offsetTop); // returns "0"

// or in JQuery
console.log($(box).offset().left) // also returns "30"
console.log($(box).offset().top) // also returns "0"

另外我建议你阅读this。

【讨论】：

【解决方案2】：

如果要查找元素相对于文档的位置，请使用 jQuery offset() 方法。

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

.offset()参考：http://api.jquery.com/offset/

如果您想找到一个元素相对于其父元素的位置，请使用 jQuery position() 方法。

var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );

.position()参考：http://api.jquery.com/position/

而且这些方法在大多数浏览器中几乎都能得到完美的结果。

【讨论】：

【解决方案3】：

我喜欢element.getBoundingClientRect()。它has good cross-browser support。

var coords = element.getBoundingClientRect();

这给出了相对于视口的坐标。要获取相对于文档的坐标，请将document.documentElement.scrollTop 添加到top 并将document.documentElement.scrollLeft 添加到left。

coords.top += document.documentElement.scrollTop;
coords.left += document.documentElement.scrollLeft;

但既然你已经在使用 jQuery，你也可以直接使用.offset()。

【讨论】：