THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML DOM clientWidth Property

HTMLElement Object Reference Element Object

Example

Get the height and width of a <div> element, including padding:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

The result of txt will be:

Height with padding: 270px
Width with padding: 420px
Try it yourself »

More "Try it Yourself" 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 reason why the "viewable" word is specified, is because if the element's content is wider than the actual width of the element, this property will only return the width that is visible (See "More Examples").

Note: To understand this property, you must understand 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 viewable height and width of an element, including padding, border and scrollbar.

Tip: To add scrollbars to an element, use the CSS overflow property.

This property is read-only.


Browser Support

Property
clientWidth Yes Yes Yes Yes Yes

Syntax

element.clientWidth

Technical Details

Return Value: A Number, representing the viewable width of an element in pixels, including padding

Examples

More Examples

Example

This example demonstrates the difference between clientHeight/clientWidth and offsetHeight/offsetWidth:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

The result of txt will be:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Try it yourself »

Example

This example demonstrates the difference between clientHeight/clientWidth and offsetHeight/offsetWidth, when we add a scrollbar to the element:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

The result of txt will be:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Try it yourself »

HTMLElement Object Reference Element Object