How do I retrieve an HTML element's actual width and height?

Question

Suppose that I have a `

` that I wish to center in the browser's display (viewport). To do so, I need to calculate the width and height of the `

` element. What should I use? Please include information on browser compatibility.

Answer 1

Hi there. I believe you are looking for getBoundingClientRect() method that you can call on DOM element.

From the MOZ docs:

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

The returned value is a DOMRect object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element. The result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.

I hope this helps!