Как определить координаты элемента

1,00
р.
Как определить координаты элемента относительно всего документа и относительно видимой части окна в javascript? После события onscroll координаты элемента относительно видимой части окна должны измениться. Заранее благодарен.

Ответ
Координаты относительно видимой части документа — .getBoundingClientRect(). Этот метод также возвращает ширину и высоту элемента.


document.querySelector('button').onclick = function() {
var c = this.getBoundingClientRect()
alert('top:' + c.top + ' left: ' + c.left +'')
} button {
margin: 500px 0 0
}
span {
display:block
}

scroll down
getBoundingClientRect()


Координаты относительно начала документа — значение .scrollTop / .scrollLeft + .getBoundingClientRect().top / .getBoundingClientRect().left


document.querySelector('button').onclick = function() {
var c = this.getBoundingClientRect(),
scrolltop = document.body.scrollTop + c.top,
scrollleft = document.body.scrollLeft + c.left
alert('top:' + scrolltop + ' left: ' + scrollleft + '')
} button {
margin: 500px 0 0 500px
}
span {
display: block
}
scroll down & left
getBoundingClientRect() + scrollTop


Более подробно на learn.javascript.ru/coordinates MDN: .scrollTop, .getBoundingClientRect()