Get the Position of an Element with JavaScript

In this article, you will learn how to get the position of an element with JavaScript.

The position relative to the window

To get the position relative to the window of an element (clientX/clientY), use the getBoundingClientRect() method.
The value obtained by this method depends on the page scroll.

The code is as below.

let targetElement = document.getElementById('target');

let clientX = targetElement.getBoundingClientRect().left;
let clientY = targetElement.getBoundingClientRect().top;

The position relative to the document

To get the position relative to the document (pageX/pageY), add the current page scroll (scrollX/scrollY) to clientX/clientY.

The code is as below.

let targetElement = document.getElementById('target');

let clientX = targetElement.getBoundingClientRect().left;
let clientY = targetElement.getBoundingClientRect().top;

let scrollX = window.pageXOffset;
let scrollY = window.pageYOffset;

let pageX = clientX + scrollX;
let pageY = clientY + scrollY;

Demo

Code

HTML

<div id="target">Target</div>

<p class="position">
  clientX = <span id="cX"></span><br>
  clientY = <span id="cY"></span><br>
  scrollX = <span id="sX"></span><br>
  scrollY = <span id="sY"></span><br>
  pageX = <span id="pX"></span><br>
  pageY = <span id="pY"></span>
</p>

JavaScript

function getPosition() {
  let targetElement = document.getElementById('target');

  let cX = document.getElementById('cX');
  let cY = document.getElementById('cY');

  let sX = document.getElementById('sX');
  let sY = document.getElementById('sY');

  let pX = document.getElementById('pX');
  let pY = document.getElementById('pY');

  let clientX = targetElement.getBoundingClientRect().left;
  let clientY = targetElement.getBoundingClientRect().top;

  let scrollX = window.pageXOffset;
  let scrollY = window.pageYOffset;

  cX.innerHTML = clientX;
  cY.innerHTML = clientY;

  sX.innerHTML = scrollX;
  sY.innerHTML = scrollY;

  pX.innerHTML = clientX + scrollX;
  pY.innerHTML = clientY + scrollY;
}

function updatePosition() {
  getPosition();
}

window.addEventListener('scroll', updatePosition, false);
window.addEventListener('resize', updatePosition, false);