在JS中获取对象的坐标

Question

所以基于这个问题,我问道,获得交叉浏览器的物体位置最可靠的方法是什么？谢谢

Answer 1

一般来说,假设你有一个名为的元素elem,实际上很容易获得元素左上角的X和Y坐标,假设你想要这些在文档坐标中.在所有浏览器中,这都是由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"

我建议你读这个.