HTML DOM offsetWidth Property
Clash Royale CLAN TAG#URR8PPP
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
HTML DOM offsetWidth Property
❮ Element Object
Example
Get the height and width of a <div> element, including padding and
border:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";<!--
The result of txt will be:
Height with padding and border: 280px
Width with padding and border: 430pxTry it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The offsetWidth property returns the viewable width of an element in
pixels, including padding, border and scrollbar, but not the 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
offsetHeight property.
Tip: Use the
clientHeight and clientWidth
properties to return the viewable height and
width of an element, only including the padding.
Tip: To add scrollbars to an element, use the CSS
overflow property.
This property is read-only.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
Syntax
element.offsetWidth<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Technical Details
| Return Value: | A Number, representing the viewable width of an element in pixels, including padding, border and scrollbar |
|---|
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: 430pxTry 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: 430pxTry it Yourself »
❮ Element Object
