Получить экранные координаты элемента DOM

Я знаю, что вы не упомянули jQuery, но вы можете использовать http://api.jquery.com/offset/ в качестве примера. Он сочетает в себе offsetLeft/top всех родителей и учетных записей для прокрутки, давая вам точный x, y (по отношению к телу) для вложенных узлов.

обратите внимание, что если вы обрабатываете события, объект event всегда сообщает вам, где произошло событие, используя http://api.jquery.com/event.pageX/ и http://api.jquery.com/event.pageY/

опять же, упоминание jQuery для вдохновения, только если вы не хотите его использовать.

вот как это делает jQuery

$.fn.offset = function (options) {
    var elem = this[0],
        doc = elem && elem.ownerDocument;

    if (!doc) {
        return null;
    }

    if (elem === doc.body) {
        return jQuery.offset.bodyOffset(elem);
    }

    return getOffset(elem, doc, doc.documentElement);
}

function getOffset(elem, doc, docElem, box) {
    try {
        box = elem.getBoundingClientRect();
    } catch(e) {}

    // Make sure we're not dealing with a disconnected DOM node
    if (!box || !jQuery.contains(docElem, elem)) {
        return box ? {
            top: box.top,
            left: box.left
        } : {
            top: 0,
            left: 0
        };
    }

    var body = doc.body,
        win = getWindow(doc),
        clientTop = docElem.clientTop || body.clientTop || 0,
        clientLeft = docElem.clientLeft || body.clientLeft || 0,
        scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
        scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
        top = box.top + scrollTop - clientTop,
        left = box.left + scrollLeft - clientLeft;

    return {
        top: top,
        left: left
    };
}

element.offsetLeft\Top не работает так, как должно быть в вопрос.
Из HTML вы можете получить координаты относительно верхнего левого угла пространства страницы, а не самого экрана пользователя.

и из плагина, by GetWindowRect() функция winAPI вы можете получить координаты верхнего левого угла окна браузера относительно экрана пользователя и по GetClientRect() вы можете получить координаты верхний левый угол прямоугольника клиента.

но это не та же самая точка, что вверху слева от страницы, всегда есть что-то между углом пространства страницы и клиентским прямоугольником или оконным прямоугольником. Он включает в себя лучшие браузерные бары и другие вещи.

что можно сделать? Кажется, что нет простого 100% контролируемого способа:

вы можете попробовать рассмотреть эти панели браузера и рассчитать пространство между Client rect и прямоугольник страницы, но эти панели браузера не постоянны от пользователя к пользователю, один может иметь больше из них, что другой, и вы получите всю вашу систему координат облажались. Затем вы можете как-то зарегистрировать количество установленных баров и дополнений в браузере и в соответствии с этим рассчитать объем пространства, который будет потребляться ими, но бары и дополнения не совпадают, и снова у вас слишком много переменных для рассмотрения.

есть немного более простой способ, вы можете пойти не сверху, а снизу - получи рук в нижней точке rect и через некоторые вычисления с помощью HTML element.offset привязать систему координат к нижней левой точки окна.
У вас нет пользовательских браузеров внизу, и поэтому вы можете быть немного более уверены в пространстве между страницей и окном, но некоторые браузеры получили всплывающие окна с информацией о загрузке e.т. c, и здесь мы снова все испортили.

другой вариант-использовать модальное окно - т. е. открыть страницу в модальном окне через window.open() от ваш JavaScript, вы можете контролировать количество элементов управления браузером и баров в этих окнах, вы можете избавиться от всех этих юзербары и сделать ясное окно только с адресной панелью и страницей. Теперь у вас есть гораздо больше контроля, и можете быть почти уверены, что это пространство между углами будет одинаковым для всех пользователей... почти.
Есть две вещи, которые необходимо упомянуть:

1) некоторые браузеры (например, google chrome, как я помню) получили эти пользовательские дополнения браузера (Firebug для пример) появляться в виде маленьких значков рядом с адресной панелью, и они все еще появляются рядом с адресной панелью модального окна.
Какая разница, вы можете спросить-разница в том, что по какой-то причине верхняя часть окна браузера станет примерно на 5 пикселей толще, если есть хотя бы один из этих значков.(опять же, вы можете попробовать зарегистрироваться, есть ли какие-либо из них, установленных в браузере пользователя, или нет)
И если, в любом случае, эти 5px не важны для вас - это может быть путь.. если вы в порядке со следующим вещь.

2)очевидно одно-что потеха с модальными окнами может быть дискомфортна для конечного пользователя, потому что она режет некоторые contols браузера и механики к которым пользователи браузера привыкают.