Ottieni la posizione di un tag div / span

Qualcuno può mostrarmi come ottenere la posizione top& leftdi un elemento divo spanquando non è specificato?

vale a dire:

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

In quanto sopra, se lo faccio:

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

55pxViene restituito il valore di . Tuttavia, se lo provo per span"12a", non viene restituito nulla.

Ho un mucchio di div/ spani su una pagina per cui non posso specificare le proprietà top/ left, ma ho bisogno di visualizzare divdirettamente sotto quell'elemento.

Questa funzione ti dirà la posizione x, y dell'elemento rispetto alla pagina. Fondamentalmente devi scorrere tutti i genitori dell'elemento e aggiungere i loro offset insieme.

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

Tuttavia, se desideri solo la posizione x, y dell'elemento rispetto al suo contenitore, tutto ciò di cui hai bisogno è:

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

Per mettere un elemento direttamente sotto questo, dovrai anche conoscere la sua altezza. Viene archiviato nella proprietà offsetHeight / offsetWidth.

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

Puoi chiamare il metodo getBoundingClientRect()su un riferimento all'elemento. Quindi è possibile esaminare i top, left, righte / o bottomle proprietà ...

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

Se usi jQuery, puoi usare il codice più succinto ...

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

Mentre la risposta di @ nickf funziona. Se non ti interessano i browser meno recenti, puoi utilizzare questa versione Javascript pura. Funziona in IE9 + e altri

var rect = el.getBoundingClientRect();

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

Come ha notato Alex, puoi usare jQuery offset () per ottenere la posizione relativa al flusso del documento. Usa position () per le sue coordinate x, y relative al genitore.

EDIT: attivato document.readyper window.loadperché loadattende tutti gli elementi in modo da ottenere le loro dimensioni invece di preparare semplicemente il DOM. Nella mia esperienza, loadrisulta in un minor numero di elementi posizionati in modo errato JavaScript.

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

Per chiunque abbia bisogno solo della posizione in alto o a sinistra, leggere modifiche al codice leggibile di @ Nickf fa il trucco.

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

e

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

Mi rendo conto che questo è un vecchio thread, ma la risposta di @alex deve essere contrassegnata come risposta corretta

element.getBoundingClientRect() è una corrispondenza esatta con quella di jQuery $(element).offset()

Ed è compatibile con IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect