原文出處：https://blog.csdn.net/a271720559/article/details/81278345

我們在做網頁是有時會需要用到絕對定位這時需要判定元素離頁面的距離。今天我們來看看怎麼獲取元素距離頁面的top、left、right、bottom。

程式碼：

var el = document.getElementById('list-content'); // 元素

function getElemDis(el) {
    var tp = document.documentElement.clientTop,
        lt = document.documentElement.clientLeft,
        rect = el.getBoundingClientRect();

    return {
        top: rect.top - tp,
        right: rect.right - lt,
        bottom: rect.bottom - tp,
        left: rect.left - lt
    }

}
 

我們直接用元素的getBoundingClientRect可以獲取元素距離頁面的距離。top和bottom則需要減去 html元素物件的上邊框的寬度即clientTop而left和right則需減去clientLeft。