Get the Position of an Element with JavaScript

09/19/2021
Contents
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);