HTML DOM Element clientWidth Property

Definition and Usage

clientWidth Property returns the visible width of the element, including padding, but not including borders, scrollbars, or margins, in pixels.

clientWidth The property is read-only.

See also:CSS Box Model Tutorial

See also:

clientHeight property

clientTop property

clientLeft property

offsetHeight property

offsetWidth property

To add a scrollbar to an element, please use CSS Overflow Property.

Example

Example 1

Get the height and width of "myDIV", including padding:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Try it yourself

Example 2

Example 2: Difference between clientHeight/clientWidth and offsetHeight/offsetWidth

Without scrollbars:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Try it yourself

With scrollbars:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Try it yourself

Syntax

element.clientWidth

Return value

Type Description
Value The visible width of the element (in pixels), including padding.

Browser support

All browsers support element.clientWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supported Supported Supported Supported Supported Supported