Правильный подход заключается в использовании element.getBoundingClientRect()
:
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
Internet Explorer поддерживал это, поскольку до тех пор, пока вы, вероятно, будете заботиться и окончательно стандартизированы в Представления CSSOM . Все другие браузеры уже давно использовали .
Некоторые браузеры также возвращают свойства высоты и ширины, хотя это нестандартно. Если вы обеспокоены более старой совместимостью с браузером, проверьте изменения этого ответа для оптимизированной унизительной реализации.
Значения, возвращаемые element.getBoundingClientRect()
, относятся к окну просмотра. Если вам нужно это относительно другого элемента, просто вычтите один прямоугольник из другого:
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from ');