纯Javascript中的元素坐标

Question

假设我在div(或任何其他包含元素,或者可能只是在文档正文中)中有一个元素.如何获得该元素相对于其容器的(x,y)坐标？

我需要能够在纯Javascript中完成它...

Answer 1

在offsetTop和offsetLeft属性是相对于offsetParent这样你就可以得到一个元素相对于其父的位置是免费的.如果您希望相对于整个位置,body则需要遍历offsetParent链并对值求和.

以下功能实现了这一点:

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

Answer 2

使用下面的

document.getElementById("elementId").offsetTop;
document.getElementById("elementId").offsetLeft;