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

Question

Итак, исходя из этого вопроса Я спросил, каков самый надежный способ определения положения объектов, который является перекрестным? Thx

Answer 1

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

Единственная уловка, о которой вы должны знать, это то, что если elem абсолютно позиционирован в другом элементе, скажем, div с левым / верхним полем 20px, эти свойства вернут 0, так как это принимает учитывать текущий элемент, а не всю цепочку элементов. К счастью, мы можем использовать функцию «обхода цепочки» для захвата всех полей элементов, связанных с данным элементом, и подсчитать их, чтобы получить правильные координаты документа.

Как упоминал Симе Видас, есть также свойства 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"

Также я предлагаю вам прочитать это .

Answer 2

Мне нравится 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().

Answer 3

Если вы хотите найти положение элемента относительно документа, используйте метод 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/

И эти методы почти дают идеальный результат в большинстве браузеров.