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

#javascript #html #css

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

Ответы

Ответ 1

Координаты относительно видимой части документа — .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
  





Координаты относительно начала документа — значение .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
  






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


Ответ 2

Координаты относительно всего документа с jQuery:

$('#element').offset();


Возвращает left и top относительно документа. Относительно прокрутки(скролла) - как
уже писали, лидер по лаконичности getBoundingClientRect