¿Cómo obtener la posición ()coordenadas X e Y) de un elemento HTML mediante JavaScript?

Me gustaría saber cómo obtener la posición (coordenadas X e Y) de cualquier elemento de una página HTML mediante JavaScript.

Estás leyendo una traducción autorizada de la pregunta Retrieve the position (X,Y) of an HTML element planteada por Greg en StackOverflow.

Respuestas

Lo más sencillo sería utilizar el método getBoundingClientRect() sobre el elemento para el que quieres obtener su posición:

var elemento = document.getElementById('id_del_elemento');
var posicion = elemento.getBoundingClientRect();
 
console.log(posicion.top, posicion.right, posicion.bottom, posicion.left);

Si lo anterior no te funciona, puedes probar con esta otra función:

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el &amp;&amp; !isNaN( el.offsetLeft ) &amp;&amp; !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
 
var elemento = document.getElementById('id_del_elemento');
var x = getOffset(elemento).left;
var y = getOffset(elemento).top;

@librosweb

9 octubre 2014, 23:03