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;

Answer 3

离开ShankarSangoli的帖子，它可以通过这种方式扩展。获取父（容器）和子（相关元素）之间的差异：

var parentOffsetTop = document.getElementById("parentId").offsetTop;
var parentOffsetLeft = document.getElementById("parentId").offsetLeft;
var childOffsetTop = document.getElementById("childId").offsetTop;
var childOffsetLeft = document.getElementById("childId").offsetLeft;

var xOffset = parentOffsetLeft - childOffsetLeft;
var yOffset = parentOffsetTop - childOffsetTop;

编辑：似乎我错了，无论如何，offsetLeft和offsetTop都是基于父级的。您无需手动执行此操作！

纯Javascript中的元素坐标

3 个答案: