获取元素绝对位置和相对位置

Q：如何获取页面某元素到顶部的距离？
A：$( "元素选择器" ).offset().top;
Q：原生js是怎么实现的呢？
A：。。。

今天一起来了解下如何获取元素绝对位置和相对位置，主要有两个知识点：

• 绝对位置和相对位置；
• HTMLDocument兼容模式。

绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。
网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。（绝对坐标减去页面的滚动条滚动的距离）

$( "元素选择器" ).offset().top

获取的是绝对位置

HTMLDocument兼容模式

document有一个compatMode属性，这个属性就是为了告诉开发者浏览器采用了哪种渲染模式。在标准模式下，document.compatMode的值等于'CSS1Compat'，在混杂模式下，document.compatMode的值等于'BackCompat'。HTML5也把这个属性纳入标准。

代码实现

清楚以上两点后，我们来看看代码实现：

// 绝对top
function getElementTop(element) {
    var actTop = element.offsetTop;
    var current = element.offsetParent;
    while(current !== null){
        actTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actTop;
}

// 相对top
function getElementTop(element) {
    var actTop = element.offsetTop;
    var current = element.offsetParent;
    while(current !== null){
        actTop += current.offsetTop;
        current = current.offsetParent;
    }
    if (document.compatMode == 'BackCompat') {
        var scrollTop = document.body.scrollTop;
    } else {
        var scrollTop = document.documentElement.scrollTop;
    }
    return actTop - scrollTop;
}

FE交流群群二维码.png