Nov 25 2008

Javascript: определение координат DOM элемента

Category: Javascriptingvar @ 22:04

Для некоторых задач требуется получить координаты элемента DOM, который спозиционирован абсолютно. Причем, его родительский элемент спозиционирован relative (относительно). То просто так получить координаты не получиться. Ниже приводятся рецепты, как это сделать.

Листинг 1: Пример абсолютного позиционирования элемента

...
<div style="position: relative">
  <div id="login" style="position: absolute; top:50px; left:25px; width: 200px">
    Login: <input type="text" name="login" value="" />
    Password: <input type="password" name="password" value="" />
    <input type="submit" name="submit" value="Send" onclick="login()" />
  </div>
</div>

Листинг 2: Пример получения координат элемента через функции findPosX, findPosY

var el = document.getElementById('login');
var x = findPosX(el);
var y = findPosY(el);

function findPosX(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        while (1) {
            curleft+=obj.offsetLeft;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.x) {
        curleft+=obj.x;
    }
    return curleft;
}

function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        while (1) {
            curtop+=obj.offsetTop;
            if (!obj.offsetParent) {
                break;
            }
            obj=obj.offsetParent;
        }
    } else if (obj.y) {
        curtop+=obj.y;
    }
    return curtop;
}

В некоторых библиотеках есть необходимая функциональнось
Листинг 3: Примеры получения координат через библиотеки: jQuery, Prototype, Mootools

// jQuery
var offset = jQuery('#login').offset();
var x = offset.left;
var y = offset.top;


// Prototype
var el = $('login');
// Returns the first non-statically-positioned ancestor of the element.
var posReal = el.realOffset(element);
// Returns an Array with the total offsets of the element, 
// including any of the element's ancestors offsets. 
// The resulting array is similar to [total_left_offset, total_top_offset]
var pos = el.cumulativeOffset(element);

// Mootools 1.2
var position = $('login').getPosition(); //returns {x: 100, y: 500};

Ссылки по теме:
JavaScript Find Position
Quirksmode: Find position
jQuery: CSS/offset
Developer Notes for prototype.js: Position
Mootools 1.2: Element Method: getPosition
Element Position Swapping Using MooTools 1.2

Tags:

4 Responses to “Javascript: определение координат DOM элемента”

  1. александр says:

    Огромное спасибо за материал, очень пригодилось!

  2. akuba says:

    опечатка в кодах
    должно быть
    var x = offset.left;
    var y = offset.top;

  3. Nadya says:

    Спасибо за статью.
    Я пользуюсь Prototype поэтому взяла пример по работе с ним.
    var posReal = el.realOffset(element); почему-то не заработал и в док-и не нашла ссылки на эту ф-цию

    var pos = el.cumulativeOffset(element); заработал с такой модификацией
    var pos = Element.cumulativeOffset(el);

Leave a Reply to ingvar