Получаване на координати на обекти в JS

Като цяло, ако приемем, че имате елемент с име elem, всъщност е доста лесно да получите координатите X и Y на горния ляв ъгъл на елемент, ако приемем, че ги искате в координатите на документа. Във всички браузъри това се връща от свойствата elem.offsetLeft и elem.offsetTop.

Единственият трик, който трябва да знаете е, че ако elem е абсолютно позициониран в друг елемент, да речем div с ляво/горно поле от 20px, тези свойства ще върнат 0, тъй като взема предвид само текущия елемент, а не цялата верига от елементи. За щастие можем да използваме функцията "chain-traversal", за да уловим всички полета на елементи, свързани с даден елемент, да ги съберем, за да получим правилните координати на документа.

Както спомена Симе Видас, има и свойствата position() и offset() на JQuery, в този случай бихте искали свойствата offset().

Можете също да използвате метода getBoundingClientRect(), но той връща координатите на елемент спрямо неговите offsetParent и следователно не е напълно надежден. Вижте следните примери:

// getPosition function
function getPosition(elem){

    var dims = {offsetLeft:0, offsetTop:0};

    do {
        dims.offsetLeft += elem.offsetLeft;
        dims.offsetTop += elem.offsetTop;
    }

    while (elem = elem.offsetParent);

    return dims;
}

cont1.style.position = "absolute";
cont1.style.marginLeft = "10px";

cont2.style.position = "absolute";
cont2.style.marginLeft = "10px";

box.style.position = "absolute";
box.style.marginLeft = "10px";


console.log(getPosition(box).offsetLeft); // returns "30"
console.log(getPosition(box).offsetTop); // returns "0"

// or in JQuery
console.log($(box).offset().left) // also returns "30"
console.log($(box).offset().top) // also returns "0"

Също така предлагам да прочетете това.

Ако искате да намерите позицията на елемент спрямо документа, използвайте метода jQuery offset().

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

.offset() справка: http://api.jquery.com/offset/

Ако искате да намерите позицията на елемент спрямо неговия родител, използвайте метода jQuery position().

var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );

.position() справка: http://api.jquery.com/position/

И тези методи почти дават перфектен резултат в повечето браузъри.

Харесвам element.getBoundingClientRect(). Той има добра поддръжка за различни браузъри.

var coords = element.getBoundingClientRect();

Това дава координатите спрямо прозореца за изглед. За да получите координатите спрямо документа, добавете document.documentElement.scrollTop към top и document.documentElement.scrollLeft към left.

coords.top += document.documentElement.scrollTop;
coords.left += document.documentElement.scrollLeft;

Но тъй като вече използвате jQuery, можете просто да използвате .offset().