Получить позицию (X, Y) HTML-элемента

при использовании jQuery эти плагин размеров превосходен и позволяет Вам, определяют точно, что Вы хотите.

, например,

Относительное положение, абсолютное положение, абсолютное положение без дополнения, с дополнением...

Это продолжается, позвольте нам просто сказать, что существует много, можно сделать с ним.

Плюс премия использования jQuery, это - легкий размер файла и легкое использование, Вы не вернетесь к JavaScript без него впоследствии.

Элементы HTML на большинстве браузеров будут have:-

offsetLeft
offsetTop

Эти specifiy положение родственника элемента его самый близкий родитель, который имеет расположение. Этот родитель может часто быть стандартным форматом интерфейса контрольных задач, к которому получают доступ, offsetParent свойство.

IE и FF3 имеют

clientLeft
clientTop

, Эти свойства менее распространены, они определяют положение элементов с его родительской клиентской областью (дополненной областью является часть клиентской области, но граница и поле не).

Библиотеки переходят к некоторым длинам для получения точных смещений для элемента.
вот простая функция, которая делает задание в каждом обстоятельства, которые я попробовал.

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left; 

Вы могли бы быть лучше обслужены при помощи платформы JavaScript, которая имеет функции для возврата такой информации (и настолько больше!) способом браузера-independant. Вот некоторые:

• Прототип
• jQuery
• MooTools
• YUI (yahoo)

С этими платформами, Вы могли сделать что-то как: $('id-of-img').top для получения y-пиксельной координаты изображения.

/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    var position = {
        top: el.offsetTop,
        left: el.offsetLeft
    };
    if (el.offsetParent) {
        var parentPosition = getDocumentOffsetPosition(el.offsetParent);
        position.top += parentPosition.top;
        position.left += parentPosition.left;
    }
    return position;
}

Благодарность ThinkingStiff для ответ , это - только другая версия его.

Если страница включает - по крайней мере - любой «DIV», функция, заданная meouw, выбрасывает значение «Y» за пределы текущей страницы. Чтобы найти точное положение, вам нужно обработать как offsetParent, так и parentNode.

Попробуйте использовать приведенный ниже код (он проверен на FF2):

var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

jQuery . offset () получит текущие координаты первого элемента или установит координаты каждого элемента в наборе согласованных элементов относительно документа.