Easy Tutorial
❮ Prop Style Animationplaystate Event Onplaying ❯

Window outerWidth and outerHeight Properties


Definition and Usage

The outerHeight property sets or returns the outer height of a window, including all interface elements (such as toolbars/scroll bars).

The outerWidth property sets or returns the outer width of a window, including all interface elements (such as toolbars/scroll bars).

outerWidth and outerHeight are read-only properties.

Note: Use the innerWidth and innerHeight properties to get the window height and width excluding toolbars and scroll bars.

Syntax

To get the width and height of the window:

window.outerWidth
window.outerHeight

To set the width and height of the window:

window.outerWidth=pixels
window.outerHeight=pixels

Browser Support

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

Property Chrome IE Firefox Safari Opera
outerWidth 1.0 9.0 1.0 3.0 9.0
outerHeight 1.0 9.0 1.0 3.0 9.0

Example

To get the width and height of the window (including toolbars/scroll bars):

var w = window.outerWidth;
var h = window.outerHeight;

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

❮ Prop Style Animationplaystate Event Onplaying ❯