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

Question

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

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

:)

Answer 1

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

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]; 
} 

Its возвращает массив [левый, верхний],

Answer 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, это решение, вероятно, будет работать в два раза быстрее, чем the other solution above, так как мы только цикл один раз.

Answer 3

код ВАС является совершенно плохо, и я некоторые улучшения на 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, поэтому, если вы собираетесь продвигать это, подумайте о его продолжении.

Answer 4

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> 

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