Пишу эту заметку скорее для себя, чтобы в другой раз не гуглить Координаты элемента на странице. Довольно сложная и часто встречающаяся задача - кроссбраузерно, точно определить в какой именно позиции находится DOM элемент. У элементов есть свойства, которые возвращают отступы, но те, кто хоть раз пытался написать код для нескольких браузеров, знает, что они совершенно не работают. Тонкости типа прокрученной страницы или отступов других элементов находящихся выше, у меня отбивают желание самому искать решение проблемы. Поэтому в результате небольших поисков был найден этот скрипт. О том, как он работает можете почитать тут на сайте автора. Нам же важен конечный результат
Вот сам скрипт
function getOffset(elem) {
if (elem.getBoundingClientRect) {
// "правильный" вариант
return getOffsetRect(elem)
} else {
// пусть работает хоть как-то
return getOffsetSum(elem)
}
}
function getOffsetSum(elem) {
var top=0, left=0
while(elem) {
top = top + parseInt(elem.offsetTop)
left = left + parseInt(elem.offsetLeft)
elem = elem.offsetParent
}
return {top: top, left: left}
}
function getOffsetRect(elem) {
// (1)
var box = elem.getBoundingClientRect()
// (2)
var body = document.body
var docElem = document.documentElement
// (3)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
// (4)
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
// (5)
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
Пользоваться им просто
var elm = document.getElementById('testid');
var coords = getOffset(elm);
alert('left='+coords.left+', top='+coords.top);
И в следующий раз не надо гуглить, просто заходим сюда и копипастим. Еще один совет по поводу браузера Mozilla Firefox. Его абсолютные координаты должны быть в пикселах, т.е. для этого браузера style="left:100" не равно style="left:100px". Оно наверно и верно, но совершенно не очевидно. Сам не мало времени потратил на эту ошибку.
Да, и у JQuery есть метод offset. Если вы пользуетесь этой библиотекой, то можете смело воспользоваться ею. Автор данного выше скрипта утверждает, что этот метод реализован сходным образом.
