Como posso obter a posição absoluta de um object na página em JavaScript?

Eu quero obter x absoluto de um object, posição y na página em JavaScript. Como posso fazer isso?

Eu tentei obj.offsetTop e obj.offsetLeft , mas esses apenas dão a posição relativa ao elemento pai. Eu acho que eu poderia percorrer e adicionar o deslocamento do pai, e o deslocamento de seu pai, e assim por diante, até chegar ao object sem pai, mas parece que deveria haver uma maneira melhor. Pesquisando não apareceu muito, e até mesmo a pesquisa do site SO não está encontrando nada.

Além disso, não posso usar o jQuery.

 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 }; }; 

(Método descaradamente roubado do PrototypeJS; estilo de código, nomes de variables ​​e valor de retorno alterados para proteger os inocentes)

Eu definitivamente sugeriria usando element.getBoundingClientRect () .

https://developer.mozilla.org/pt-BR/docs/Web/API/element.getBoundingClientRect

Resumo

Retorna um object de retângulo de texto que inclui um grupo de retângulos de texto.

Sintaxe

var rectObject = object.getBoundingClientRect();

Retorna

O valor retornado é um object TextRectangle que é a união dos retângulos retornados por getClientRects () para o elemento, isto é, as checkboxs de borda CSS associadas ao elemento.

O valor retornado é um object TextRectangle , que contém propriedades left , top , right e bottom somente leitura descrevendo a checkbox de borda, em pixels, com a parte superior esquerda em relação à parte superior esquerda da viewport.

Aqui está uma tabela de compatibilidade de navegador obtida do site MDN vinculado:

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

É amplamente suportado e é realmente fácil de usar, sem mencionar que é muito rápido. Aqui está um artigo relacionado de John Resig: http://ejohn.org/blog/getboundingclientrect-is-awesome/

Você pode usá-lo assim:

 var logo = document.getElementById('hlogo'); var logoTextRectangle = logo.getBoundingClientRect(); console.log("logo's left pos.:", logoTextRectangle.left); console.log("logo's right pos.:", logoTextRectangle.right); 

Aqui está um exemplo muito simples: http://jsbin.com/awisom/2 (você pode visualizar e editar o código clicando em “Editar no JS Bin” no canto superior direito).

Ou aqui está outro usando o console do Chrome: Usando element.getBoundingClientRect () no Chrome

Nota:

Eu tenho que mencionar que os atributos de width e height do valor de retorno do método getBoundingClientRect() são undefined no Internet Explorer 8. Ele funciona no Chrome 26.x, Firefox 20.xe Opera 12.x embora. Solução alternativa no IE8: para width , você pode subtrair os atributos direito e esquerdo do valor de retorno e, em height , você pode subtrair os atributos inferior e superior ( como este ).