Как найти координаты кнопки HTML или изображения, кросс-браузер?

Question

Недавно в comp.lang.javascript была тема, в которой победа была объявлена, но код не был опубликован:

На странице HTML как найти координаты левого нижнего угла элемента (скажем, изображения или кнопки) надежно во всех браузерах и стилях страниц? Метод, отстаиваемый в «Аяксе в действии» (копия, которая у меня есть), кажется, не работает в IE при некоторых обстоятельствах. Чтобы облегчить проблему, давайте предположим, что мы можем установить глобальный стиль документа как «традиционный» или «переходный» или любой другой.

Пожалуйста, предоставьте код или указатель на код, пожалуйста (полная функция, которая работает во всех браузерах) - не просто говорите "это легко", а болтайте о том, что происходит в DOM - если я хочу прочитать такой Я вернусь к comp.lang.javascript. Пожалуйста, ругайте меня, если это повторение, и укажите мне на решение - я попытался его найти.

Answer 1

По моему опыту, единственный надежный способ заставить подобные вещи работать, это использовать JQuery (не бойтесь, это просто внешний файл сценария, который вы должны включить). Тогда вы можете использовать утверждение как

$('#element').position()

или

$('#element').offset()

чтобы получить текущие координаты, которые отлично работают во всех браузерах, с которыми я сталкивался до сих пор.

Answer 2

Я нашел это решение в сети ... Это полностью решило мою проблему. Пожалуйста, проверьте эту ссылку для происхождения. http://www.quirksmode.org/js/findpos.html

/** This script finds the real position, 
 * so if you resize the page and run the script again, 
 * it points to the correct new position of the element.
 */
function findPos(obj){
   var curleft = 0;
   var curtop = 0;

   if (obj.offsetParent) {
      do {
         curleft += obj.offsetLeft;
         curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);

      return {X:curleft,Y:curtop};
   }
}

Отлично работает в Firefox, IE8, Opera (надеюсь, в других тоже) Спасибо тем, кто делится своими знаниями ... С уважением,

Адинамическая

Answer 3

Я использовал это, работает как для IE, так и для Firefox.

var Target = document.getElementById('SomeID');
var Pos = findPos(Target);

AnotherObj = document.getElementById('AnotherID');
AnotherObj .style.top  = Pos[1] + "px";
AnotherObj .style.left = Pos[0] + "px";

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

Answer 4

В jQuery:

var jq = $('#yourElement');
var position = jq.offset();
alert('x: ' + position.left + ', y: ' + position.top);

var bottomLeftPixelPosition =
    { left: position.left, top: position.top + jq.height() - 1; };

Answer 5

Попробуйте это:

var elm = document.getElementById('foo');
var point = {x:0,y:elm.offsetHeight}; // Change to y:0 to get the top-left

while (elm)
{
    // This will get you the position relative to the absolute container,
    // which is what you need for positioning an element within it
    if (elm.style.position == 'absolute')
        break;

    point.x += elm.offsetLeft;
    point.y += elm.offsetTop;

    elm = elm.offsetParent;
}