Buscar X/Y de un elemento HTML con JavaScript

Question

¿Cómo puedo encontrar las coordenadas XY de un elemento HTML (DIV) desde JavaScript si no se establecieron explícitamente?

Answer 1

Eso puede ser complicado según el navegador y la versión. Sugiero usar jQuery y el plugin de posiciones.

Answer 2

No estoy seguro para qué lo necesita, y tales cosas son siempre relativas (pantalla, ventana, documento). Pero cuando tenía que darse cuenta de eso, me encontré con este sitio útil: http://www.mattkruse.com/javascript/anchorposition/source.html

Y también me encontré con que la persona plugin de información de herramienta hecha para jQuery tenía todo tipo de visión interesante ax, trucos y posicionamiento (se ven en su ventana clase y el soporte subyacente jQuery lo proporciona). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

Se puede utilizar una biblioteca como prototipo o jQuery, o puede utilizar this handy function:

Devuelve una matriz.

myPos = findPos(document.getElementById('something')) 
x = myPos[0] 
y = myPos[1] 

function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
    curleft = obj.offsetLeft 
    curtop = obj.offsetTop 
    while (obj = obj.offsetParent) { 
     curleft += obj.offsetLeft 
     curtop += obj.offsetTop 
    } 
    } 
    return [curleft,curtop]; 
} 

Answer 4

Así es como lo hago:

// Based on: http://www.quirksmode.org/js/findpos.html 
var getCumulativeOffset = function (obj) { 
    var left, top; 
    left = top = 0; 
    if (obj.offsetParent) { 
     do { 
      left += obj.offsetLeft; 
      top += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return { 
     x : left, 
     y : top 
    }; 
}; 

Answer 5

Por lo que vale la pena, he aquí una versión recursiva:

function findPos(element) { 
    if (element) { 
    var parentPos = findPos(element.offsetParent); 
    return [ 
     parentPos.X + element.offsetLeft, 
     parentPos.Y + element.offsetTop 
    ]; 
    } else { 
    return [0,0]; 
    } 
} 

Answer 6

Se pueden añadir dos propiedades a la Element.prototype para obtener la parte superior/izquierda de cualquier elemento.

window.Object.defineProperty(Element.prototype, 'documentOffsetTop', { 
    get: function() { return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop : 0); } 
}); 

window.Object.defineProperty(Element.prototype, 'documentOffsetLeft', { 
    get: function() { return this.offsetLeft + (this.offsetParent ? this.offsetParent.documentOffsetLeft : 0); } 
}); 

He aquí una demostración comparando los resultados con jQuery de offset().top y .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/