Отримайте позицію тегу 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'12a', нічого не повернеться.

У мене на сторінці є група 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 (), щоб отримати положення відносно документообігу. Використовуйте позицію () для своїх координат x, y щодо батьків.

EDIT: Switched 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's $(element).offset()

І сумісний з IE4 + ... https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect