javascript - 查找元素相对于文档的位置

Question

确定元素相对于文档/正文/浏览器窗口的位置的最简单方法是什么？

现在我正在使用.offsetLeft/offsetTop，但是这个方法只给你相对于父元素的位置，所以你需要确定body元素有多少个父元素，才能知道相对于主体/浏览器窗口/文档位置的位置。

这种方法也太麻烦了。

Answer 1

你可以得到 top 和 left 而无需像这样遍历 DOM:

function getCoords(elem) { // crossbrowser version
    var box = elem.getBoundingClientRect();

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;

    var top  = box.top +  scrollTop - clientTop;
    var left = box.left + scrollLeft - clientLeft;

    return { top: Math.round(top), left: Math.round(left) };
}