How To Find An Element’s Size And Position

The getBoundingClientRect() method returns the size and position of an element as a ClientRect object, which has the following properties:

  • left: The x-coordinate of the left edge of the element, relative to the viewport.
  • top: The y-coordinate of the top edge of the element, relative to the viewport.
  • right: The x-coordinate of the right edge of the element, relative to the viewport.
  • bottom: The y-coordinate of the bottom edge of the element, relative to the viewport.
  • width: The width of the element, including its padding, border, and vertical scrollbar (if present).
  • height: The height of the element, including its padding, border, and horizontal scrollbar (if present).

To use getBoundingClientRect(), you will need to select element you want to find the size and position of. You can do this using the document.querySelector() method or by accessing the element directly through its id or class.

For example, to find the size and position of an element with the id “myElement”, you could do the following:

const element = document.querySelector('#myElement');
const rect = element.getBoundingClientRect();

console.log(rect.left, rect.top, rect.width, rect.height);

Or, if the element has a class of “myClass”, you could do the following:

const element = document.querySelector('.myClass');
const rect = element.getBoundingClientRect();

console.log(rect.left, rect.top, rect.width, rect.height);

Keep in mind that the position of the element is relative to the viewport, which is the visible part of the web page. If you want to find the position of the element relative to the entire page, you will need to take into account the scroll position of the page.