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

You should use the .offsetWidth and .offsetHeight properties.Note they belong to the element, not .style.

var width = document.getElementById('foo').offsetWidth;

Function .getBoundingClientRect() returns dimensions and location of element as floating-point numbers after performing CSS transforms.

> console.log(document.getElementById('id').getBoundingClientRect())DOMRect {    bottom: 177,    height: 54.7,    left: 278.5,​    right: 909.5,    top: 122.3,    width: 631,    x: 278.5,    y: 122.3,}

Take a look at Element.getBoundingClientRect().

This method will return an object containing the width, height, and some other useful values:

{    width: 960,    height: 71,    top: 603,    bottom: 674,    left: 360,    right: 1320}

For Example:

var element = document.getElementById('foo');var positionInfo = element.getBoundingClientRect();var height = positionInfo.height;var width = positionInfo.width;

I believe this does not have the issues that .offsetWidth and .offsetHeight do where they sometimes return 0 (as discussed in the comments here)

Another difference is getBoundingClientRect() may return fractional pixels, where .offsetWidth and .offsetHeight will round to the nearest integer.

IE8 Note: getBoundingClientRect does not return height and width on IE8 and below.*

If you must support IE8, use .offsetWidth and .offsetHeight:

var height = element.offsetHeight;var width = element.offsetWidth;

Its worth noting that the Object returned by this method is not really a normal object. Its properties are not enumerable (so, for example, Object.keys doesn't work out-of-the-box.)

More info on this here:How best to convert a ClientRect / DomRect into a plain Object

Reference:

• .offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
• .offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
• .getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

NOTE: this answer was written in 2008. At the time the best cross-browser solution for most people really was to use jQuery. I'm leaving the answer here for posterity and, if you're using jQuery, this is a good way to do it. If you're using some other framework or pure JavaScript the accepted answer is probably the way to go.

As of jQuery 1.2.6 you can use one of the core CSS functions, height and width (or outerHeight and outerWidth, as appropriate).

var height = $("#myDiv").height();var width = $("#myDiv").width();var docHeight = $(document).height();var docWidth = $(document).width();