javascript - 在纯 JavaScript 中获取 HTML 元素的真实位置

Question

如何在纯 JavaScript 中获取屏幕中的真实坐标（顶部和左侧）？

我发现在父元素上使用递归来计算坐标的方法，但似乎它们并没有覆盖所有网页，比如这里、这里和这里

Answer 1

由于我在网上浏览了很长时间以找到不使用任何 javascript 库的解决方案，并且由于我找到的所有答案都建议使用 jQuery 方法.offset()，因此我决定复制此方法并制作一个小的纯 javascriptoffset()函数来执行一样：

function isWindow( obj ) {
    return obj != null && obj === obj.window;
}
function getWindow( elem ) {
    return isWindow( elem ) ? elem : elem.nodeType === 9 && elem.defaultView;
}
function offset( elem ) {

    var docElem, win,
        box = { top: 0, left: 0 },
        doc = elem && elem.ownerDocument;

    docElem = doc.documentElement;

    if ( typeof elem.getBoundingClientRect !== typeof undefined ) {
        box = elem.getBoundingClientRect();
    }
    win = getWindow( doc );
    return {
        top: box.top + win.pageYOffset - docElem.clientTop,
        left: box.left + win.pageXOffset - docElem.clientLeft
    };
};

您可以在此页面上尝试它（我们将采用页面底部的一个元素，即答案区域，因为它存在其他方法失败），在控制台上运行：

offset(document.getElementById('wmd-input')).top == $('#wmd-input').offset().top

如果你是真的，这意味着它有效;-)