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

How can I calculate the width and height of a `` element, so as to be able to center it in the browser's display (viewport)? What browsers support each technique?

You should use the .offsetWidth and .offsetHeight properties.
Note they belong to the element, not .style.
var width = document.getElementById('foo').offsetWidth;


The .getBoundingClientRect() function returns the dimensions and location of the element as floating-point numbers after performing CSS transforms.
> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
bottom: 177,
height: 54.7,
left: 278.5,​
right: 909.5,
top: 122.3,
width: 631,
x: 278.5,
y: 122.3,
}


Stack Overflow Q#294250, score: 1745