Получить позицию тега div / span

Может ли кто-нибудь показать мне, как получить top& leftпозицию элемента divили, spanесли он не указан?

то есть:

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

В приведенном выше случае, если я это сделаю:

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

Значение 55pxвозвращается. Однако, если я попробую это для span«12а», то ничего не вернется.

У меня есть куча div/ spans на странице, для которой я не могу указать свойства top/ left, но мне нужно отображать divпрямо под этим элементом.

Эта функция сообщит вам позицию x, y элемента относительно страницы. По сути, вам нужно перебрать все родительские элементы и сложить их смещения.

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

Однако, если вам просто нужна позиция x, y элемента относительно его контейнера, то все, что вам нужно, это:

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

Чтобы разместить элемент прямо под этим, вам также необходимо знать его высоту. Это сохраняется в свойстве offsetHeight / offsetWidth.

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

Вы можете вызвать метод getBoundingClientRect()по ссылке на элемент. Затем вы можете проверить top, left, rightи / или bottomсвойства ...

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

Если вы используете jQuery, вы можете использовать более сжатый код ...

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

Хотя ответ @ nickf работает. Если вам не нравятся старые браузеры, вы можете использовать эту чистую версию Javascript. Работает в IE9 + и др.

var rect = el.getBoundingClientRect();

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

Как заметил Алекс, вы можете использовать jQuery offset () для получения позиции относительно потока документов. Используйте position () для его координат x, y относительно родителя.

РЕДАКТИРОВАТЬ: переключено document.readyна, window.loadпотому что loadожидает всех элементов, поэтому вы получаете их размер, а не просто готовите DOM. По моему опыту, это loadприводит к меньшему количеству неправильно позиционированных элементов Javascript.

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

Для тех, кому нужно только верхнее или левое положение, небольшие изменения в читаемом коде @ Nickf помогут.

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

и

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

Я понимаю, что это старая ветка, но ответ @alex необходимо пометить как правильный.

element.getBoundingClientRect() точно соответствует jQuery $(element).offset()

И он совместим с IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect