javascript - JS获取对象坐标

Question

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

Answer 1

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

唯一需要注意的技巧是，如果 elem 绝对定位在另一个元素中，比如 div 的左/上边距为 20px，这些properties 将返回 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 .