Sometimes, we want to get the X and Y coordinates for a div element with JavaScript.

In this article, we’ll look at how to get the X and Y coordinates for a div element with JavaScript.

How to get the X and Y coordinates for a div element with JavaScript?

To get the X and Y coordinates for a div element with JavaScript, we an use the getBoundingXClientRect method.

For instance, we add a div by writing:

<div>
  hello world
</div>

Then we write:

const element = document.querySelector('div');
const position = element.getBoundingClientRect();
const x = position.left;
const y = position.top;
console.log(x, y)

to select the div with querySelector.

And then we call getBoundingClientRect to get the position of the div.

Then we get the x and y coordinates of the div with position.left and position.top.

Conclusion

To get the X and Y coordinates for a div element with JavaScript, we an use the getBoundingXClientRect method.