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

Get real position of an HTML element in pure javascript

本文关键字：真实 位置 元素 HTML javascript 获取      更新时间：2023-09-26

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

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

由于我在网上浏览了很长时间，找到了一个不使用任何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

如果你是真的，这意味着它有效；-）

相关文章：