javascript - significado - Obtener la posición de una etiqueta div/span

etiqueta span

Question

¿Puede alguien mostrarme cómo obtener la posición top e left de un elemento div o span cuando no se especifica uno?

es decir:

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

En lo de arriba, si lo hago:

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

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

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

Answer 1

Como señaló Alex, 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.

EDITAR: document.ready window.load para window.load porque la load espera por todos los elementos para que pueda obtener su tamaño en lugar de simplemente preparar el DOM. En mi experiencia, load resultados en menos elementos incorrectamente posicionados Javascript.

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

Answer 2

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 solo quería la posición x, y del elemento en relación con su contenedor, entonces todo lo que necesita es:

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

Para poner un elemento directamente debajo de este, también necesitarás saber su altura. Esto se almacena en la propiedad offsetHeight / offsetWidth.

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

Answer 3

Me doy cuenta de que este es un hilo viejo, pero la respuesta de @alex debe marcarse como la respuesta correcta

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

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

Answer 4

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

Answer 5

Para cualquiera que necesite 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 6

Puede llamar al método getBoundingClientRect() en una referencia al elemento. Luego puede examinar las propiedades top , left , right y / o bottom ...

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

Si usa jQuery, puede usar el código más sucinto ...

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