纯Javascript中的元素坐标

假设我在div中有一个元素（或者任何其他包含元素，或者可能只是在文档的主体中）。如何获取该元素相对于其容器的（x，y）坐标

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

使用下面的

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

---

离开了ShankarSangoli的职位，它可以这样扩展。获取父级（容器）和子级（相关元素）之间的差异：

---

编辑：似乎我错了，offsetLeft和offsetTop都是基于父对象的。您不需要手动执行此操作

offsetTop和

offsetLeft

属性是相对于

offsetParent

的，因此您可以免费获取元素相对于其父元素的位置。如果需要相对于整个

主体的位置

，则需要遍历

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;
}

---

jQuery是纯javascript：没有像coffescript或server->bytecode->JavaScirpt这样的中断程序在运行。这段代码有两个问题。首先，它将curtop泄漏到全局名称空间中。变量行应为“var curleft=0，curtop=0；”。其次，如果传递的对象没有offsetParent，它将不返回任何内容。@Hans-对作用域泄漏的调用很好。固定的。至于另一个问题，每个元素都有一个

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;
}