Easy Tutorial
❮ Prop Script Async Prop Table Cellspacing ❯

Window innerWidth and innerHeight Properties


Definition and Usage

innerHeight returns the height of the window's document display area, including the height of the vertical scrollbar if present.

innerWidth returns the width of the window's document display area, including the height of the horizontal scrollbar if present.

innerWidth and innerHeight are read-only properties.

Note: Use the outerWidth and outerHeight properties to get the width and height of the browser window.


Syntax

To get the width and height of the document display area:

window.innerWidth
window.innerHeight

To set the width and height of the document display area:

window.innerWidth = pixels
window.innerHeight = pixels

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property Chrome IE Firefox Safari Opera
innerWidth 1.0 9.0 1.0 3.0 9.0
innerHeight 1.0 9.0 1.0 3.0 9.0

Note: These properties are not supported in IE 8 and earlier. Use the clientWidth and clientHeight properties instead.


Examples

Get the width and height of the window:

var w = window.innerWidth;
var h = window.innerHeight;

The following demonstrates the use of innerWidth, innerHeight, outerWidth, and outerHeight:

var txt = "";
txt += "<p>innerWidth: " + window.innerWidth + "</p>";
txt += "<p>innerHeight: " + window.innerHeight + "</p>";
txt += "<p>outerWidth: " + window.outerWidth + "</p>";
txt += "<p>outerHeight: " + window.outerHeight + "</p>";

A practical JavaScript solution that covers all browsers, including IE8 and below:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

❮ Prop Script Async Prop Table Cellspacing ❯