HTML DOM clientWidth
Property
Example
Get the width of a div element, including padding:
var elmnt = document.getElementById("myDIV");
var txt = "Height of the div element, including padding: " + elmnt.clientHeight + "px<br>";
txt += "Width of the div element, including padding: " + elmnt.clientWidth + "px";
Definition and Usage
The clientWidth
property is a read-only property that returns the width of the element in pixels, including padding but excluding borders, margins, and scrollbars. It returns an integer value in pixels.
Inline elements and elements without CSS styles have a clientWidth
property value of 0.
Note: To understand this property, refer to the CSS Box Model.
Tip: This property is often used together with the clientHeight property.
Tip: Use the offsetHeight and offsetWidth properties to return the visible height and width of the element, including padding and borders.
Tip: To add scrollbars to an element, use the overflow property.
This is a read-only property.
Browser Support
Property | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
clientWidth | Yes | Yes | Yes | Yes | Yes |
Syntax
element.clientWidth
Technical Details
| Return Value: | Returns an integer representing the width of the element in pixels. | | --- | --- |
More Examples
Example
The following example demonstrates the difference between clientHeight/clientWidth
and offsetHeight/offsetWidth
properties:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";
txt += "Height including padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";
txt += "Width including padding and border: " + elmnt.offsetWidth + "px";
Example
The following example demonstrates the difference between clientHeight/clientWidth
and offsetHeight/offsetWidth
properties after adding scrollbars to the element:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "<b>Style information of the div:</b><br>";
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";
txt += "Height including padding, border, and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";
txt += "Width including padding, border, and scrollbar: " + elmnt.offsetWidth + "px";