Координаты элементов в чистом Javascript

Question

Скажите, что у меня есть элемент внутри div (или любой другой содержащий элемент, или, возможно, только в теле документа).Как получить координаты (x, y) этого элемента относительно его контейнера?

И мне нужно иметь возможность сделать это в чистом Javascript ...

Answer 1

Свойства offsetTop и offsetLeft относятся к offsetParent, поэтому вы можете получить положение элемента относительно его родителя бесплатно.Если вы хотите, чтобы позиция относилась ко всей body, то вам нужно пройти по цепочке offsetParent и суммировать значения.

Следующая функция выполняет это:

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

Answer 2

Используйте ниже

document.getElementById("elementId").offsetTop;
document.getElementById("elementId").offsetLeft;

Answer 3

Выходя из поста ШанкарСанголи, он может быть расширен таким образом. Получите разницу между родителем (контейнером) и дочерним элементом (рассматриваемый элемент):

var parentOffsetTop = document.getElementById("parentId").offsetTop;
var parentOffsetLeft = document.getElementById("parentId").offsetLeft;
var childOffsetTop = document.getElementById("childId").offsetTop;
var childOffsetLeft = document.getElementById("childId").offsetLeft;

var xOffset = parentOffsetLeft - childOffsetLeft;
var yOffset = parentOffsetTop - childOffsetTop;

РЕДАКТИРОВАТЬ: кажется, я ошибся, offsetLeft и offsetTop в любом случае основаны на родительском. Вам не нужно делать это вручную!