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

Ответ 1

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

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

Ответ 2

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

Ответ 3

Вы можете использовать библиотеку, такую ​​как Prototype или jQuery, или вы можете использовать эту удобную функцию:

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

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

Ответ 4

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

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

Ответ 5

Вы можете добавить два свойства в 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/

Ответ 6

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

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