Блог веб-разработчика

Для некоторых задач требуется получить координаты элемента 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: Javascript