Find a DOM element's X and Y position (and width/height) using JavaScript

There are a number of different ways to find the X and Y position of a DOM element in a web page but the getBoundingClientRect() is the best (and simplest) in my opinion, it is also cross-browser and supported in IE since version 9.

Here's an example where we get the X/Y position of element #one and set the X/Y of #two to be the same:

  <div style="position:absolute; top: 10px; left: 10px;" id="one"><p>hello</p></div>
  <div style="position:absolute; top: 30px; left: 30px;" id="two"><p>world</p></div>   var one = document.querySelector( "#one" );
  var two = document.querySelector( "#two" );   var rect = one.getBoundingClientRect();   two.style.top = rect.top + "px";
  two.style.left = rect.left + "px";

Stepping through the example:

It firstly creates two elements, both absolutely-positioned at different locations on the screen. It then calls getQuerySelector() on each element to retrieve the DOM Elements to work on. It then gets the X/Y of element #one using getBoundingClientRect() and finally, it updates the top and left of element #two to be the same as #one.

It is worth noting that when the top and left of #two are updated I needed to add "px" to the end, the object returned from getBoundingClientRect() stores the X/Y (and other values) as numbers wheres as the top and left style elements expect a string that specifies the unit of measurement (we are using pixels here).

getBoundingClientRect() returns X/Y positions based on the browser's viewport (in other words, the browser's window) and takes into account scroll position, whether there is a scrollbar and any zooming of the window, so regardless of where the element is on the page and how it is being viewed it will return the correct X/Y in all cases.

getBoundingClientRect() will always return top and left values for X/Y position but may also return the element's width and height depending on browser support. For example, the latest build of Chrome returns these values on Windows desktop, but not all are guaranteed on all devices/browsers:

bottom: 60
height: 50
left: 10
right: 42
top: 10
width: 32