You are here: Reference > JavaScript > client-side > HTML DOM > properties > innerWidth (window)

innerWidth property (window)

Browser support:
9
Returns the width of the browser's client area, including the vertical scrollbar, if rendered.
Note: The innerWidth property is supported in Internet Explorer from version 9.
The innerWidth property is rarely useful, because scrollbars are not part of the document working area. Use the cross-browser clientWidth property of the html element instead. It returns the width of the browser's client area without the vertical scrollbar.
  • You can get the height of the client area, including the vertical scrollbar with the innerHeight property.
  • You can get the height of the client area, excluding the vertical scrollbar with the clientHeight property.
  • The top-left corner of the client area relative to the top-left corner of the screen can be retrieved with the screenLeft and screenTop properties.
  • If you need the total width of the browser window, use the outerWidth property.
  • 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, please see the pages for the clientWidth, offsetWidth and scrollWidth properties.

Syntax:

object.innerWidth;
You can find the related objects in the Supported by objects section below.
This property is read/write.

Possible values:

Integer that represents the width of the window client area, in pixels.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the innerWidth property:
<head>
    <script type="text/javascript">
        function GetClientWindowSize () {
            if ('innerWidth' in window) {   // all browsers, except IE before version 9
                alert ("The width of the client area including the vertical scrollbar: " + window.innerWidth);
            }
            else {  // Internet Explorer before version 9
                alert ("The width of the client area without the vertical scrollbar: " + document.documentElement.clientWidth);
            }
            
            if ('innerHeight' in window) {  // all browsers, except IE before version 9
                alert ("The height of the client area including the horizontal scrollbar: " + window.innerHeight);
            }
            else {  // Internet Explorer before version 9
                alert ("The height of the client area without the horizontal scrollbar: " + document.documentElement.clientHeight);
            }
        }
    </script>
</head>
<body>
    <button onclick="GetClientWindowSize ();">Get the size of the client window</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content