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

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

Обратите внимание, что если вы обрабатываете события, объект события всегда сообщает вам, где произошло событие, используя 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 вы можете получить координаты относительно верхнего левого угла пространства страницы, а не самого экрана пользователя.

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

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

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

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

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

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

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

2) Очевидное — что удовольствие от модальных окон может быть неудобным для конечного пользователя, потому что оно сокращает некоторые настройки браузера и механику, к которой привыкли пользователи браузера.