Example
Get the entire height and width of an element, including padding:
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The scrollWidth property returns the entire width of an element in pixels, including padding, but not the border, scrollbar or margin.
Tip: Use the scrollHeight property to return the entire height of an element.
The scrollWidth and scrollHeight properties return the entire height and width of an element, including the height and width that is not viewable (because of overflow).
Tip: To add scrollbars to an element, use the CSS overflow property.
This property is read-only.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| scrollWidth | Yes | Yes | Yes | Yes | Yes |
Syntax
element.scrollWidth
Technical Details
| Return Value: | A Number, representing the entire width (horizontally) of an element, in pixels |
|---|
More Examples
Example
Using padding, border, scrollbar and margin to show how this affects the scrollWidth and scrollHeight property:
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
Try it Yourself »
Example
Return the scrollHeight and scrollWidth of an element and then set its height and width to the values returned from scrollHeight and scrollWidth:
var elmnt = document.getElementById("content");
function
getFunction() {
var x = elmnt.scrollWidth;
var y = elmnt.scrollHeight;
}
function
setFunction() {
elmnt.style.height = y.scrollHeight +
"px";
elmnt.style.width = y.scrollWidth + "px";
}
Try it Yourself »