Open In App

JavaScript Window innerWidth and innerHeight Properties

Improve
Improve
Like Article
Like
Save
Share
Report

The innerWidth property in JavaScript returns the width and innerHeight property returns the height of window content area. 

Syntax:

window.innerWidth
window.innerHeight

Parameter: It doesn’t require any parameters. 

Return Value: It returns a number(Representing the Width and Height of the window’s content area). 

Note: For IE 8 i.e (Internet Edge 8) or earlier, use clientWidth and clientHeight to get the width and height of the window. 

Example: In this example we retrieve and display the inner width and height of the browser window using JavaScript, showing the dimensions dynamically in a paragraph element.

html




<!DOCTYPE html>
<html>
    <head>
        <title>Browser Window</title>
    </head>
  
    <body>
        <h2>Browser Window</h2>
        <p id="demo"></p>
        <script>
            var Width, Height, result;
            Width =
                window.innerWidth ||
                document.documentElement
                    .clientWidth ||
                document.body.clientWidth;
            Height =
                window.innerHeight ||
                document.documentElement
                    .clientHeight ||
                document.body.clientHeight;
            result =
                document.getElementById("demo");
            result.innerHTML =
                "Browser inner width: " +
                Width +
                "<br>Browser inner height: " +
                Height;
        </script>
    </body>
</html>


Output: 

Browser

Window innerWidth and innerHeight Properties Example Output



Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads