Question

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

方法我发现在父元素上使用递归来计算坐标，但似乎它们并未涵盖所有网页，例如here，here和here

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

如果你成功了，这意味着它有效; - ）

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

1 个答案: