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

Ответы

Ответ 1

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

Ответ 2

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

Ответ 3

Как заметил Алекс, вы можете использовать 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 );
});

Ответ 4

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

Ответ 5

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

var rect = el.getBoundingClientRect();

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