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

Question

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

方法我发现在父元素上使用递归来计算坐标,但似乎它们没有涵盖所有的网页,就像这里,这里和这里

Answer 1

由于我浏览网络很长一段时间才找到一个不使用任何javascript库的解决方案,并且因为我发现所有答案都建议使用jQuery方法.offset(),所以我决定复制这个方法并制作一个小的纯javascript offset()函数来做一样:

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

如果你成真,这意味着它有效;-)