Obtener la posición de una etiqueta div/span

Question

Puede alguien mostrará cómo obtener la posición top & left de un elemento de spandiv o cuando no se especifica?

es decir:

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span> 
<span id='12a' onmouseover="GetPos(this);">stuff</span> 

En lo anterior, si lo hago:

document.getElementById('11a').style.top 

El valor de 55px se devuelve. Sin embargo, si intento eso para span '12a', no se devuelve nada.

que tienen un montón de div/s span en una página que no puedo especificar las propiedades top/left para, pero tengo que mostrar una div directamente debajo de ese elemento.

Answer 1

Esta función le dirá la posición x, y del elemento relativo a la página. Básicamente, debes recorrer todos los elementos del elemento y agregar sus desplazamientos.

function getPos(el) { 
    // yay readability 
    for (var lx=0, ly=0; 
     el != null; 
     lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); 
    return {x: lx,y: ly}; 
} 

Sin embargo, si sólo quería la posición x, y del elemento respecto a su contenedor, entonces todo lo que necesita es:

var x = el.offsetLeft, y = el.offsetTop; 

para poner un elemento directamente debajo de éste, usted' También necesito saber su altura. Esto se almacena en la propiedad offsetHeight/offsetWidth.

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin; 

Answer 2

Usted puede llamar al método getBoundingClientRect() en una referencia al elemento. A continuación, se puede examinar el top, left, right y/o propiedades bottom ...

var offsets = document.getElementById('11a').getBoundingClientRect(); 
var top = offsets.top; 
var left = offsets.left; 

Si se utiliza jQuery, puede utilizar el código más breve ...

var offsets = $('#11a').offset(); 
var top = offsets.top; 
var left = offsets.left; 

Answer 3

Como Alex se observó puede usar jQuery offset() para obtener la posición relativa al flujo de documentos. Use position() para sus coordenadas x, y en relación con el padre.

EDIT: Conmutado document.ready por window.load porque load espera por todos los elementos para que pueda obtener su tamaño en lugar de simplemente preparar el DOM. En mi experiencia, load resulta en un menor número de elementos incorrectamente posicionados con Javascript.

$(window).load(function(){ 
    // Log the position with jQuery 
    var position = $('#myDivInQuestion').position(); 
    console.log('X: ' + position.left + ", Y: " + position.top); 
}); 

Answer 4

Para quien necesita solo la posición superior o izquierda, pequeñas modificaciones al código legible de @ Nickf hacen el truco.

function getTopPos(el) { 
    for (var topPos = 0; 
     el != null; 
     topPos += el.offsetTop, el = el.offsetParent); 
    return topPos; 
} 

y

function getLeftPos(el) { 
    for (var leftPos = 0; 
     el != null; 
     leftPos += el.offsetLeft, el = el.offsetParent); 
    return leftPos; 
} 

Answer 5

Soy consciente de que es un viejo hilo, pero la respuesta @alex 's tiene que ser marcado como la respuesta correcta

element.getBoundingClientRect() es una coincidencia exacta con jQuery de $(element).offset()

Y es compatible con IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

Answer 6

Mientras que la respuesta de @nickf funciona. Si no le interesan los navegadores más antiguos, puede usar esta versión pura de Javascript. Funciona en IE9 + y otros

var rect = el.getBoundingClientRect(); 

var position = { 
    top: rect.top + window.pageYOffset, 
    left: rect.left + window.pageXOffset 
};