Получить позицию элемента по javascript

Я видел дюжину script, которые могут поймать позицию x и y элемента/объекта на странице. Но у меня всегда возникают проблемы с улавливанием x и y, когда веб-страница использует поля в теле или другие элементы, абсолютные/относительные элементы, такие как.

Есть ли решение, которое обеспечивает точное положение, независимо от того, какие поля или прокладки используются.

Ответ 1

Я использую следующий код, чтобы переместить поле div, чтобы следовать курсору в этом веб-сайте IME

function xy(x) {
    o = document.getElementById(x);
    var l =o.offsetLeft; var t = o.offsetTop;
    while (o=o.offsetParent)
        l += o.offsetLeft;
    o = document.getElementById(x);
    while (o=o.offsetParent)
        t += o.offsetTop;
    return [l,t];
}

Возвращает массив [left, top],

Ответ 2

Получение точной позиции - это просто вопрос о смещении offsetLefts и offsetTops в offsetParents:

function getPos(ele){
    var x=0;
    var y=0;
    while(true){
        x += ele.offsetLeft;
        y += ele.offsetTop;
        if(ele.offsetParent === null){
            break;
        }
        ele = ele.offsetParent;
    }
    return [x, y];
}

Btw, это решение, вероятно, будет работать в два раза быстрее, чем другое решение выше, поскольку мы только зацикливаем один раз.

Ответ 3

offsetParent и другие функции смещения старые... используйте getBoundingClientRect функция... используйте это:

function getAbsPosition(element) {
   var rect = element.getBoundingClientRect();
   return {x:rect.left,y:rect.top}
}

теперь вы можете использовать его как это

<div style="margin:50px;padding:50px;" id="myEl">lol</div>
<script type="text/javascript">
    var coords = getAbsPosition( document.getElementById('myEl') );
    alert( coords.x );alert( coords.y );
</script>

Не волнуйтесь... независимо от того, сколько маржи или позиции или дополнения элемент имеет, он всегда работает

Ответ 4

ВАС код совершенно плохой, и у меня есть некоторые улучшения в Pacerier, чтобы дать, поэтому я отправлю свой собственный ответ:

function getPos(el, rel)
{
    var x=0, y=0;
    do {
        x += el.offsetLeft;
        y += el.offsetTop;
        el = el.offsetParent;
    }
    while (el != rel)
    return {x:x, y:y};
}

Если используется только как getPos(myElem), возвращается глобальная позиция. Если второй элемент включен как аргумент (т.е. getPos(myElem, someAncestor)), который является предком/родителем первого (по крайней мере, где-то вверх по цепочке), то он будет давать позицию относительно этого предка. Если rel не задано (т.е. остается undefined), то он целенаправленно использует != вместо !==, потому что он должен остановиться, когда el получает значение null и rel равно undefined как хорошо, поэтому нестрогое равенство целеустремленно, не меняйте его. Он также возвращает объект, так как это немного читаемо в использовании, чем массив (и поэтому вы можете сделать что-то вроде getPos().x).

Это происходит из решения Pacerier, поэтому, если вы хотите повысить его, подумайте о его продолжении.