posicion - ¿Cómo puedo obtener la posición absoluta de un objeto en la página en Javascript?

obtener la posicion de un elemento javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• Recuperar la posición (X, Y) de un elemento HTML 23 respuestas

Quiero obtener la posición x, y absoluta de un objeto en la página en Javascript. ¿Cómo puedo hacer esto?

Intenté obj.offsetTop y obj.offsetLeft , pero esos solo dan la posición relativa al elemento padre. Creo que podría recorrer y agregar el desplazamiento de los padres, y el desplazamiento de los padres, y así sucesivamente hasta que llegue al objeto sin padre, pero parece que debería haber una mejor manera. Google no apareció mucho, e incluso la búsqueda de sitios SO no encuentra nada.

Además, no puedo usar jQuery.

Answer 1

Definitivamente, sugeriría usar element.getBoundingClientRect() .

element.getBoundingClientRect()

Resumen

Devuelve un objeto de rectángulo de texto que incluye un grupo de rectángulos de texto.

Sintaxis

var rectObject = object.getBoundingClientRect();

Devoluciones

El valor devuelto es un objeto TextRectangle que es la unión de los rectángulos devueltos por getClientRects() para el elemento, es decir, los cuadros de borde de CSS asociados con el elemento.

El valor devuelto es un objeto TextRectangle , que contiene propiedades de solo lectura a la left , top , right e bottom describen el cuadro de borde, en píxeles, con la parte superior izquierda relativa a la parte superior izquierda de la ventana gráfica.

Aquí hay una tabla de compatibilidad del navegador tomada del sitio de MDN vinculado:

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

Es ampliamente compatible, y es realmente fácil de usar, sin mencionar que es realmente rápido. Aquí hay un artículo relacionado de John Resig: http://ejohn.org/blog/getboundingclientrect-is-awesome/

Puedes usarlo así:

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

Aquí hay un ejemplo realmente simple: http://jsbin.com/awisom/2 (puede ver y editar el código haciendo clic en "Editar en JS Bin" en la esquina superior derecha).

O aquí hay otra usando la consola de Chrome:

Nota:

Tengo que mencionar que los atributos de width y height del valor de retorno del método getBoundingClientRect() undefined están undefined en Internet Explorer 8. Sin embargo, funciona en Chrome 26.x, Firefox 20.x y Opera 12.x. Solución en IE8: para el width , puede restar los atributos derecho e izquierdo del valor de retorno, y para la height , puede restar los atributos inferior y superior ( como este ).

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

(Método descaradamente robado de PrototypeJS; estilo de código, nombres de variables y valor de retorno cambiado para proteger a los inocentes)