Получить реальную позицию элемента HTML в чистом javascript

Question

Как получить реальные координаты (вверху и слева) на экране в чистом JavaScript?

методы я нашел использовать рекурсию на родительских элементов для вычисления координат, но, кажется, что они не охватывают все веб-страницы, как here, here и here

Answer 1

Поскольку я просмотрел сеть в течение длительного времени, чтобы найти решение, которое не использует какую-либо библиотеку JavaScript, и так как все ответы, которые я нашел советую использовать метод JQuery .offset(), я решил скопировать этот METHODE и сделать небольшие чистый 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 
    }; 
}; 

Yo и можно попробовать здесь, на этой странице (мы возьмем элемент, который в нижней части страницы, область ответа, так как он есть, что другие методы не срабатывают), запустить на консоли:

offset(document.getElementById('wmd-input')).top == $('#wmd-input').offset().top 

Если вы это понимаете, это означает, что он работает ;-)