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

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

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

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

ОТВЕТЫ

Ответ 1

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, стиль кода, имена переменных и возвращаемое значение изменены для защиты невинных)

Ответ 2

Я бы определенно предложил использовать element.getBoundingClientRect().

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

Резюме

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

Синтаксис

var rectObject = object.getBoundingClientRect();

Возвращает

Возвращаемое значение представляет собой объект TextRectangle, который является объединением прямоугольники, возвращенные getClientRects() для элемента, т.е. CSS граничные поля, связанные с элементом.

Возвращаемое значение - это объект TextRectangle, который содержит только чтение left, top, right и bottom свойства, описывающие border-box, в пикселей, слева вверху слева от области просмотра.

Здесь таблица совместимости браузера, взятая из связанного сайта MDN:

+---------------+--------+-----------------+-------------------+-------+--------+
|    Feature    | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
+---------------+--------+-----------------+-------------------+-------+--------+
| Basic support | 1.0    | 3.0 (1.9)       | 4.0               | (Yes) | 4.0    |
+---------------+--------+-----------------+-------------------+-------+--------+

Он широко поддерживается и действительно прост в использовании, не говоря уже о том, что он очень быстро. Вот связанная статья Джона Ресига: http://ejohn.org/blog/getboundingclientrect-is-awesome/

Вы можете использовать его следующим образом:

var logo = document.getElementById('hlogo');
var logoTextRectangle = logo.getBoundingClientRect();

console.log("logo left pos.:", logoTextRectangle.left);
console.log("logo right pos.:", logoTextRectangle.right);

Здесь действительно простой пример: http://jsbin.com/awisom/2 (вы можете просмотреть и отредактировать код, нажав "Изменить в JS Bin" в верхнем правом углу).

Или здесь другой, использующий консоль Chrome: Использование element.getBoundingClientRect() в Chrome

Примечание:

Я должен упомянуть, что атрибуты width и height возвращаемого значения метода getBoundingClientRect(): undefined в Internet Explorer 8. Он работает в Chrome 26.x, Firefox 20.x и Opera 12. х, хотя. Обходной путь в IE8: для width вы можете вычесть возвращаемые значения справа и слева, а для height вы можете вычесть нижние и верхние атрибуты (like это).