Uzyskaj pozycję znacznika div / span

Czy ktoś może mi pokazać, jak uzyskać pozycję top& elementu lub , gdy nie jest on określony?leftdivspan

to znaczy:

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

W powyższym, jeśli to zrobię:

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

Zwracana jest wartość 55px. Jeśli jednak spróbuję tego dla span„12a”, nic nie zostanie zwrócone.

Mam kilka div/ spans na stronie, dla których nie mogę określić top/ leftproperties, ale muszę wyświetlić divbezpośrednio pod tym elementem.

Ta funkcja poda pozycję x, y elementu względem strony. Zasadniczo musisz przejść przez wszystkie elementy nadrzędne elementu i dodać razem ich przesunięcia.

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

Jeśli jednak chciałeś tylko pozycji x, y elementu względem jego kontenera, wszystko, czego potrzebujesz, to:

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

Aby umieścić element bezpośrednio pod tym, musisz również znać jego wysokość. Jest to przechowywane we właściwości offsetHeight / offsetWidth.

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

Możesz wywołać metodę getBoundingClientRect()na odwołaniu do elementu. Następnie można zbadać top, left, righti / lub bottomwłaściwości ...

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

Jeśli używasz jQuery, możesz użyć bardziej zwięzłego kodu ...

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

Podczas gdy odpowiedź @ nickf działa. Jeśli nie interesują Cię starsze przeglądarki, możesz użyć tej czystej wersji Javascript. Działa w IE9 + i innych

var rect = el.getBoundingClientRect();

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

Jak zauważył Alex, możesz użyć jQuery offset (), aby uzyskać pozycję względem przepływu dokumentu. Użyj position () dla jego współrzędnych x, y względem rodzica.

EDIT: Switched document.readydla window.loadponieważ loadczeka na wszystkich elementach więc masz ich rozmiar zamiast po prostu przygotowuje DOM. Z mojego doświadczenia loadwynika, że ​​mniej elementów nieprawidłowo pozycjonowanych w Javascript jest mniej.

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

Dla każdego, kto potrzebuje tylko górnej lub lewej pozycji, niewielkie modyfikacje czytelnego kodu @ Nickf załatwią sprawę.

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

i

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

Zdaję sobie sprawę, że to stary wątek, ale odpowiedź @alex musi być oznaczona jako poprawna

element.getBoundingClientRect() jest dokładnym dopasowaniem do jQuery $(element).offset()

Jest kompatybilny z IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect