Window innerWidthand innerHeightProperty

Window 对象参考手册Window Object

Definition and Usage

innerHeight Returns the height of the window's document display area, including the scrollbar height if there is a vertical scrollbar.

innerWidth Returns the width of the window's document display area, including the scrollbar height if there is a horizontal scrollbar.

innerWidth and innerHeight are read-only properties.

Note:UseouterWidth and outerHeightproperties to get the width and height of the browser window.

Syntax

Get the width and height of the document display area:

window.innerWidth
window.innerHeight

Set the width and height of the document display area:

window.innerWidth=pixels
window.innerHeight=pixels

Browser Support

The numbers in the table indicate the first browser version number that supports the property.

Property
innerWidth 1.0 9.0 1.0 3.0 9.0
innerHeight 1.0 9.0 1.0 3.0 9.0

Note: IE 8 and earlier IE versions do not support these two properties; you can useclientWidth and clientHeightproperties.

Example

Example

Get the height and width of the window:

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

Try it yourself »

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

Example

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>";

Try it yourself »

A practical JavaScript solution (covering all browsers, including IE8 and lower versions):

Example

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

Try it yourself »

Window 对象参考手册Window Object Other Extensions