In this section, we will learn what the Element clientWidth property is and how to use it in JavaScript.

What is Element clientWidth Property in JavaScript?

The JavaScript Element clientWidth property is used to get the “viewable” width of an element in pixels.

This width is including the content and padding. But not border, margin, or vertical scroll-bar if present.

Notes:

• We say “viewable” width of an element. That means if the target element has a fixed width but there was an overflow of content, then the width would be only the value set for the `width` property (which is the visible width of the element) + the size of the padding.

Element clientWidth Property Syntax:

element.clientWidth;

Element clientWidth Property Input Value

The clientWidth property is read-only and so we can’t assign a value to it.

Element clientWidth Property Return Value

The return value of this property, as mentioned before, is the viewable width of the target element.

Example: using Element clientWidth Property in JavaScript

See the Pen using Element clientWidth Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.

How does Element clientWidth property work in JavaScript?

In this example, the width of the <ol> element is set to 100px and its padding to 20px.

So that’s how we got the value 140px when we’ve called the clientWidth property:

100px + 20px + 20px = 140px;