Understanding Element Dimensions in JavaScript: Width and Height

In web development, accurately determining an element's size is crucial for any number of different tasks, including dynamic layout adjustments and responsive design.

JavaScript offers a number of different ways to measure the width and height of an element, but understanding the nuances of each approach is important.

Here, I'd like to explain the different approaches to getting the width and height of HTML elements in JavaScript and explain the differences between properties like innerWidth and outerWidth.

Getting the Width and Height of an Element

To get the dimensions of an element in JavaScript, you would typically use properties like clientWidth, offsetWidth, or methods like getBoundingClientRect().

clientWidth and clientHeight

These properties return the width and height of the element, including any padding but excluding any borders, scrollbars, or margins. This is likely to be the dimensions you are most likely to need: this is the 'usable' area of an element.

In use, this looks like this:

const element = document.getElementById('element');const width = element?.clientWidth;const height = element?.clientHeight;

offsetWidth and offsetHeight

offsetWidth and offsetHeight are very similar to clientWidth and clientHeight with a key difference: they return the element's size, including any padding, borders, or scrollbars (but excluding margins). Think of this as the 'total' area of an element occupies within the document.

Much like above, use looks like this:

const width = element?.offsetWidth;const height = element?.offsetHeight;

getBoundingClientRect()

This method does rather more than just return the width and height of an element, it returns a DOMRect object with the properties left, top, right, bottom, width, and height.

So, not only the dimensions we are after but also the position of the element relative to the viewport. It also means you can keep your code a tiny bit tidier by using destructuring:

const rect = element.getBoundingClientRect();const { width, height } = rect;

InnerWidth/Height vs. OuterWidth/Height

A point of frequent confusion (and not helped by jQuery's insistence on using the same naming convention for something different), innerWidth, innerHeight, outerWidth, and outerHeight are all measurements from the window.

window.innerWidth and window.innerHeight

These two properties return the width and height of the window's current content area, which includes the scrollbars. This is useful when it comes to understanding the visible area of a web page:

const { innerWidth, innerHeight } = window;

window.outerWidth and window.outerHeight

When compared to their 'inner' cousins, outerWidth and outerHeight measure the width and height of the entire browser window which includes any sidebar, window chrome, and window‑resizing borders/handles. This is more akin to measuring the dimensions of the entire browser window, rather than just the viewport that your application sits within.

These are children of the window object and can be destructured in just the same way:

const { outerWidth, outerHeight } = window;

Fin.