Найти X/Y элемента HTML с JavaScript

Question

Как найти XY-координаты элемента HTML (DIV) из JavaScript, если они не были явно заданы?

Answer 1

Это может быть сложно в зависимости от браузера и версии. Я бы предложил использовать jQuery и плагин Position.

Answer 2

Я не уверен, для чего он нужен, и такие вещи всегда относительны (экран, окно, документ). Но когда мне нужно, чтобы понять это, я нашел этот сайт полезным: http://www.mattkruse.com/javascript/anchorposition/source.html

И я также обнаружил, что подсказке плагин кто-то сделал для JQuery были всякие интересные прозрения х, приемы у позиционирования (посмотрите на его видовом класс и базовую поддержку jQuery для него). http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 3

Вы можете использовать библиотеку, такие как Prototype или JQuery, или вы можете использовать this handy function:

Он возвращает массив.

myPos = findPos(document.getElementById('something')) 
x = myPos[0] 
y = myPos[1] 

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

Answer 4

Вот как я это делаю:

// Based on: http://www.quirksmode.org/js/findpos.html 
var getCumulativeOffset = function (obj) { 
    var left, top; 
    left = top = 0; 
    if (obj.offsetParent) { 
     do { 
      left += obj.offsetLeft; 
      top += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
    } 
    return { 
     x : left, 
     y : top 
    }; 
}; 

Answer 5

Для чего это стоит, вот рекурсивная версия:

function findPos(element) { 
    if (element) { 
    var parentPos = findPos(element.offsetParent); 
    return [ 
     parentPos.X + element.offsetLeft, 
     parentPos.Y + element.offsetTop 
    ]; 
    } else { 
    return [0,0]; 
    } 
} 

Answer 6

Вы можете добавить два свойства в Element.prototype получить верхний/левый любого элемента.

window.Object.defineProperty(Element.prototype, 'documentOffsetTop', { 
    get: function() { return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop : 0); } 
}); 

window.Object.defineProperty(Element.prototype, 'documentOffsetLeft', { 
    get: function() { return this.offsetLeft + (this.offsetParent ? this.offsetParent.documentOffsetLeft : 0); } 
}); 

Вот демо сравнивая результаты с JQuery-х offset().top и .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/