Как получить координаты X и Y HTML-элемента на странице?

Решение: метод getBoundingClientRect()

Для получения точных координат элемента относительно окна просмотра (viewport) используйте метод getBoundingClientRect(). Он возвращает объект DOMRect со свойствами left, top, right, bottom, width, height. Чтобы перевести их в координаты относительно всего документа, нужно прибавить значения прокрутки страницы (window.scrollX и window.scrollY).

function getElementPosition(element) {
  const rect = element.getBoundingClientRect();
  return {
    x: rect.left + window.scrollX,
    y: rect.top + window.scrollY
  };
}

// Пример использования:
const button = document.getElementById('myButton');
const pos = getElementPosition(button);
console.log('Абсолютные координаты:', pos.x, pos.y);

Почему это работает?

• getBoundingClientRect() учитывает все CSS-свойства: margin, padding, border, transform, position и другие. Он даёт координаты относительно окна браузера (viewport).
• Добавляя window.scrollX (горизонтальная прокрутка) и window.scrollY (вертикальная прокрутка), мы переводим координаты в систему документа.
• Метод работает для любых элементов, включая inline, block и элементы с трансформациями.

Полный пример с учётом прокрутки

<!DOCTYPE html>
<html>
<head>
  <style>
    #container {
      position: relative;
      margin-left: 50px;
      margin-top: 30px;
      height: 2000px; /* для демонстрации прокрутки */
    }
    #inner {
      padding: 20px;
    }
    #myButton {
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="inner">
      <button id="myButton">Наведи на меня</button>
    </div>
  </div>

  <script>
    function getAbsolutePosition(element) {
      const rect = element.getBoundingClientRect();
      return {
        x: rect.left + window.scrollX,
        y: rect.top + window.scrollY
      };
    }

    const button = document.getElementById('myButton');
    const pos = getAbsolutePosition(button);
    console.log('X:', pos.x, 'Y:', pos.y);
  </script>
</body>
</html>

Дополнительные замечания

• Производительность: getBoundingClientRect() вызывает перерасчёт layout, но для большинства задач это незаметно. Не вызывайте его в циклах или анимациях без необходимости.
• Трансформации: Если элемент имеет transform: translate() или rotate(), метод учитывает эти трансформации, что делает его предпочтительнее ручного расчёта через offsetLeft.
• Совместимость: Поддерживается всеми современными браузерами, включая IE9+ (в IE9 есть баги с scrollX, используйте window.pageXOffset для старых браузеров).

Альтернатива для старых браузеров

В очень старых браузерах (IE8 и ниже) используйте рекурсивный обход offsetParent:

function getOffsetSum(element) {
  let top = 0, left = 0;
  while (element) {
    top += element.offsetTop;
    left += element.offsetLeft;
    element = element.offsetParent;
  }
  return { x: left, y: top };
}

Этот способ не учитывает transform и scroll, поэтому лучше использовать getBoundingClientRect().

function getElementOffset(element) {
  let top = 0, left = 0;
  while (element) {
    top += element.offsetTop;
    left += element.offsetLeft;
    element = element.offsetParent;
  }
  return { x: left, y: top };
}

const button = document.getElementById('myButton');
const offset = getElementOffset(button);
console.log('Координаты:', offset.x, offset.y);