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

Question

Может кто-нибудь показать мне, как получить позицию 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 / span s на странице, для которых я не могу указать свойства top / left, но мне нужно отобразить div непосредственно под этим элементом. *

Answer 1

Вы можете вызвать метод 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;

Answer 2

Эта функция сообщит вам 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;

Answer 3

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

var rect = el.getBoundingClientRect();

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

Answer 4

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

EDIT: переключено 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 );
});

Answer 5

Для тех, кому нужна только верхняя или левая позиция, небольшие изменения читаемого кода @ 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;
}

Answer 6

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

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

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