js怎么获取一个元素在屏幕上的位置呢

Question

就是元素相对于屏幕左边和顶边的距离，不管这个元素是不是脱离了文档流或者页面是不是有卷动，怎么能正确获取到呢？我现在用的offsetTop和offsetLeft有点问题，页面卷动就不行了

Answer 1

// 兼容低版本IE// 转换为数字 function intval(v) {
    v = parseInt(v);    return isNaN(v) ? 0 : v;
}function getPos(e) {    // left and top value
    var left = 0;    var top = 0;    // offsetParent返回一个指向最近的定位元素,标准模式如果没有就返回html/body,表示迁移量都是相对其中来计算.
    while (e.offsetParent) {        // 计算偏移量
        left += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
        top += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);        // 最近的定位元素或者body
        e = e.offsetParent;
    }

    left += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
    top += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);    return {        x: left,        y: top
    };
}document.addEventListener('mousemove', function(e) {    // 即便滚动条再怎么动也不会影响目标DOM距离顶部的距离
    console.log(getPos(document.querySelector('.footer')))
})

Answer 2

调用 dom.getBoundingClientRect() 获取。