In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > browser > properties > outerWidth (window)

outerWidth property (window)

Browser support:

9

Sets or retrieves the total width of the browser window, including toolbars and scrollbars.

Note: The outerWidth property is supported in Internet Explorer from version 9.

There isn't any property or method for this functionality in older Internet Explorer versions. You can see a workaround for this problem in Example 2. It is not a nice solution, because resizes the browser window.

You can get the height of the browser window with the outerHeight property.
The top-left corner of the window relative to the top-left corner of the screen can be retrieved by the screenX and screenY properties in Internet Explorer and Firefox, and by the screenLeft and screenTop properties in Google Chrome and Safari.
If you need the width of the browser's client area, use the clientWidth property of the html element.
If you need information about the dimensions of the screen, use the screen object.
To get the width of the document or an element in the document, use the clientWidth, offsetWidth or the scrollWidth property.

Syntax:

object.outerWidth;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that sets or returns the width of the window, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the outerWidth property:

<head>
    <script type="text/javascript">
        function GetWindowSize () {
            alert ("width: " + window.outerWidth +
                "\n height: " + window.outerHeight);
        }
    </script>
</head>
<body>
    <button onclick="GetWindowSize ();">Get the window size!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to get size of the browser window in all commonly used browsers:

<head>
    <script type="text/javascript">
        function GetWindowSize () {
            if (window.outerHeight) {
                var totalW = window.outerWidth;
                var totalH = window.outerHeight;
            } else {
                if (document.documentElement.clientWidth){
                    var clientW = document.documentElement.clientWidth;
                    var clientH = document.documentElement.clientHeight;
                        // resize the window, the new window will be smaller
                    window.resizeTo (clientW, clientH);

                        // calculate the difference between the client and the total size in the new window
                    var frameW = clientW - document.documentElement.clientWidth;
                    var frameH = clientH - document.documentElement.clientHeight;

                    var totalW = clientW + frameW;
                    var totalH = clientH + frameH;

                        /* if no scrollbar appeared when the original window was made smaller,
                           then the totalW and totalH contains the size of the original window,
                           else totalW or totalH contains a larger value. */

                    window.resizeTo (totalW, totalH);

                    if (clientW != document.documentElement.clientWidth || clientH != document.documentElement.clientHeight) {
                            // repair the mistake
                        frameW = totalW - document.documentElement.clientWidth;
                        frameH = totalH - document.documentElement.clientHeight;

                        totalW = clientW + frameW;
                        totalH = clientH + frameH;
                    }
                }
                else {
                    alert ("Your browser does not support this example!");
                }
            }
            alert ("width: " + totalW +
                "\n height: " + totalH);
        }
    </script>
</head>
<body>
    <button onclick="GetWindowSize ();">Get the window size!</button>
</body>