在JS中获取对象的坐标

Question

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

Answer 1

通常，假设您有一个名为elem的元素，实际上很容易获得元素左上角的X和Y坐标，假设您希望在文档坐标< / em>的。在所有浏览器中，elem.offsetLeft和elem.offsetTop属性都会返回此内容。

您必须注意的唯一技巧是，如果elem绝对位于另一个元素中，例如div左/上边距为20px，则这些属性将返回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。

Answer 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/

这些方法几乎在大多数浏览器中都能提供完美的结果。

Answer 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()。