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.
Description
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 | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
