Как я могу получить абсолютное положение объекта на странице в Javascript? [дубликат]

этот вопрос уже есть ответ здесь:

Я хочу получить абсолютную позицию X,y объекта на странице в Javascript. Как я могу это сделать?

пробовал obj.offsetTop и obj.offsetLeft, но те только дают положение относительно родителя элемент. Я думаю, что я мог бы перебрать и добавить смещение родителя, и смещение его родителя, и так далее, пока я не доберусь до объекта без родителя, но похоже, что должен быть лучший способ. Гуглинг не так много появился, и даже в этом случае поиск по сайту ничего не находит.

кроме того, я не могу использовать jQuery.

2 70
javascript dom datetimeoffset

2 ответа:

var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

(метод бесстыдно украден из PrototypeJS; стиль кода, имена переменных и возвращаемое значение изменены для защиты невинных)

104

я бы посоветовал использовать элемент.getBoundingClientRect().

https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

резюме

возвращает объект текстового прямоугольника, который заключает в себе группу текста прямоугольники.

синтаксис

var rectObject = object.getBoundingClientRect();

возвращает

возвращенный значение TextRectangle

120