Используя javascript, как получить позицию элемента - PullRequest
Новая
       11

Используя javascript, как получить позицию элемента

3 голосов
/ 27 мая 2011

, как сказано в заголовке, как получить позиции элемента x, y относительно их местоположения на веб-странице и схемы позиционирования, такие как абсолютные, относительные и т. Д.

Ответы [ 3 ]

6 голосов
/ 27 мая 2011

В современном браузере getBoundingClientRect и getClientRects предоставят вам прямоугольные объекты, описывающие ваш элемент.См. https://developer.mozilla.org/en/DOM/element.getBoundingClientRect и https://developer.mozilla.org/en/DOM/element.getClientRects

. Если вам нужно работать с IE8, вам придется делать разные вещи в разных браузерах, чтобы получить правильные ответы (например, обнаружение объекта getBoundingClientRect и откат назадна другой метод, если он отсутствует).

Расчет jQuery offset() и режим Quirksmode findPos будут давать неправильные ответы в любом браузере, который выполняет позиционирование на субпикселях (например, Firefox или IE9), потому что они округляютответ на целое число пикселей.В зависимости от того, что вы делаете, это может или не может быть хорошо.

5 голосов
/ 27 мая 2011

С jQuery: 

var $elt = $('select an element however'),
    cssPosition = $elt.css('position'),
    offset = $elt.offset(),
    top = offset.top,
    left = offset.left;

Без jQuery используйте функцию Quirksmode's findPos : 

var elt = document.getElementBy...,
    pos = findPos(elt),
    top = pos[1],
    left = pos[0];

Получение вычисленного значения CSS position безбиблиотека еще одна банка червей .Это сводится к:

4 голосов
/ 01 июня 2011

Проверьте это

JS: 

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft
        curtop = obj.offsetTop
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft
            curtop += obj.offsetTop
        }
    }
    return [curleft,curtop];
}

HTML: 

<div id="ser">&nbsp;TEST</div>

ВОЗВРАТЗВОНИТЕ: 

alert(findPos(document.getElementById('ser')));

Я надеюсь, что это поможет вам

...