5 Ways To Get The Width Of An HTML Element In JavaScript

Learn how to get the width of an HTML element using different properties and methods in JavaScript.

1. Using .innerWidth Property
2. Using .offsetWidth Property
3. Using .clientWidth Property
4. Using .scrollWidth Property
5. Using .getBoundingClientRect() Method

1. Using innerWidth

The innerWidth property only works on the window object to get the width of the browser’s viewport.

This property won’t work on any of the HTML element objects and will return undefined.

window.innerWidth; // returns width of the viewport

Make sure to check if the window object becomes available first before accessing the innerWidth of it.

Try it out

See the Pen JavaScript Get Width of Element #1 Using innerWidth by SoftAuthor (@softauthor) on CodePen.

2. Using offsetWidth

The offsetWidth property returns the total amount of space of an element horizontally, including the width of the content, scrollbars (if any), padding, and border.

That is something we won’t be able to do with innerWidth as it only works on the window object.

Here is the simple div element that has an id called box.

<div id="box"></div>

Here is the CSS style for the box element.

#box {
  width:100px;
  padding:5px;
  border:5px solid blue;
  height:100px;
  margin:10px;
}

In order to get the width of it, first we need to get the DOM reference of the element object.

Call getElementById() method on the document object passing the box string as an argument.

It returns the box element object and assigns it to the constant box.

const box = document.getElementById("box");
console.log(box.offsetWidth); // 120 (100 width + 10 border + 10 padding)

The offsetWidth property on the element object will return the actual element width.

In this case, it’ll be 120.

When using the offsetWidth property, it will add the following CSS properties to calculate the element width:

• width – 100px specific in the CSS rule
• border – 5px on both sides
• padding – 5px on both sides

If we remove the border and padding, the offsetWidth property will return…

You’ve guessed it right…100px

What if we do not give the width:100px inside the CSS rule?

In that case..innerWidth will check two things:

1. If it is a block-level element such as div, p, section, etc, or an inline element such as span, strong, etc.
2. If any content is inside that element.

If there is no content and no width specified in an HTML element, the innerWidth property returns 0.

If the element is block level with some content in it, the innerWidth property will return the full width of the viewport.

Normally a block-level element will fill the width of its parent element as soon as we add some content to it.

If the width of the block-level element is specified inside the CSS rule, the innerWidth property will return just that…of course including the padding and border.

On the other hand, when the inline HTML element has some content in it, the innerWidth will return the width of the element based on its content size.

If you want to add width to the inline HTML element via CSS, you’ll need to convert it to an inline block first by adding display:inline-block CSS property.

Only then, the value of the width property specified in CSS will be effective on the inline elements such as span, strong, etc.

The innerWidth won’t consider margin or scrollbar widths when it calculates the width of an element.

Try it out

See the Pen JavaScript Get Width of Element #2 Using offsetWidth by SoftAuthor (@softauthor) on CodePen.

3. Using clientWidth

The clientWidth returns how much an element takes up horizontally, including padding but not including the border, margins, or scrollbars.

The clientWidth property is very similar to offsetWidth.

The only difference is that the clientWidth will ignore the border width when it calculates the width of an element.

It only returns the sum of the width and padding and ignores the border width.

const box = document.getElementById("box");
console.log(box.clientWidth); // 110 (100 width + 10 padding) & ignores border

Whereas the offsetWidth will return the sum of the width, padding, and border.

Try it out

See the Pen JavaScript Get Width of Element #3 Using clientWidth by SoftAuthor (@softauthor) on CodePen.

4. Using scrollWidth

The scrollWidth returns the actual size of the content, regardless of how much of it is currently visible.

It returns inner div width + inner div padding + outer div padding.

Here is a parent div with an id box that has a width of 100 pixels. It has a child div element with an id inner-box.

The inner div has a width of 500px.

<div id="box">
    <div id="inner-box">
    </div>
</div>

I’ve also set the overflow property to the parent div as the inner div content width is greater than the parent div.

#box {
  width:100px;
  padding:5px;
  height:100px;
  overflow:scroll;
}

#inner-box {
  width:500px;
  padding:5px;
}

When you access the scrollWidth property on the parent div element, it returns 520 pixels.

When using the scrollWidth property, it will add the following CSS properties to calculate the element width:

• The width of the inner element if it’s greater than the parent – 500px
• Padding of the parent element – 10px (both left and right sides)
• Padding of the child element – 10px (both left and right sides)

const box = document.getElementById("box");
console.log(box.scrollWidth); // 520 (500 inner box width + 10 inner box padding + 10 outbox padding )

Try it out

See the Pen JavaScript Get Width of Element #4 Using scrollWidth by SoftAuthor (@softauthor) on CodePen.

5. Using getBoundingClientRect()

The getBoundingClientRect() method will return the DOMRect object.

The DOMRect object has information about the location and dimension of the element as floating numbers after completing the CSS transforms.

We can easily get the width by accessing the width property on the DOMRect object.

const box = document.getElementById('box');
const boxRect = box.getBoundingClientRect();
console.log(boxRect.width); // 110 (100 width + 10 border) and ignores padding

The width of the element includes the actual width specified in the CSS or content width PLUS border on both right and left sides PLUS padding on both sides.

See the Pen JavaScript Get Width of Element #5 Using getBoundingClientRect by SoftAuthor (@softauthor) on CodePen.

The getBoundingClientRect() method returns an object that has the following properties:

• height – the height of the element including the actual height specified in the CSS + the border on both sides and ignores the padding.
• x – horizontal location of the element on the viewport
• y – vertical location of the element on the viewport
• left – left side location of the element on the viewport
• right – right side location of the element on the viewport
• top – right side location of the element on the viewport
• bottom – bottom side location of the element on the viewport