HTML DOM Element clientWidth
Example
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 »
More examples below.
Definition and Usage
The clientWidth property returns the viewable width of an element in
pixels, including padding, but not the border, scrollbar or margin.
The clientWidth property is read-only.
Syntax
element.clientWidth
Return Value
| Type | Description |
| Number | The viewable width of an element (in pixels) including padding. |
The difference between clientHeight/clientWidth and offsetHeight/offsetWidth
Without a scrollbar:
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 a scrollbar:
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 »
Browser Support
element.clientWidth is supported in all browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
