Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to calculate Width and Height of the Window using JavaScript ?

  • Last Updated : 18 Nov, 2021

In this article, we will know to calculate the width & the height of the window using Javascript. Given an HTML document that is running on a Window & we need to find the height and width of the window. The Window innerWidth property is used for returning the width of a window’s content area. The Window innerHeight property is used for returning the height of a window’s content area. Both these properties are read-only property.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

window.innerWidth
window.innerHeight

Return Value: It return the number that represents the width & inner height (in pixels) of the window content area.

Example 1: This example uses window.innerHeight and window.innerWidth property to get the height and width of the window. The innerHeight property is used to return the height of the window and the innerWidth property is used to return the width of the window.



HTML




<!DOCTYPE HTML>
<html>
 
<head>
    <title>Calculate Width and Height of the Window</title>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;"></p>
 
    <button onclick="GFG_Fun()">Click Here</button>
    <p id="GFG_DOWN"
       style="color: green;
              font-size: 24px;
              font-weight: bold;">
    </p>
 
     
    <!-- Script to display the window width and height -->
    <script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML = "Click on the button to get the"
    + " width and height of the Window";
 
    function GFG_Fun() {
        var width = window.innerWidth;
        var Height = window.innerHeight;
        el_down.innerHTML = "Width: " + width + " pixels"
        + ", " + "Height: " + Height + " pixels";
    }
    </script>
</body>
 
</html>

Output:

window.inner Property

Example 2: This example uses document.documentElement.clientHeight and document.documentElement.clientWidth method to get the Height and Width of window respectively.

HTML




<!DOCTYPE HTML>
<html>
 
<head>
    <title>Calculate Width and Height of the Window</title>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
            GeeksforGeeks
        </h1>
    <p id="GFG_UP" style="font-size: 19px; font-weight: bold;"></p>
 
    <button onclick="GFG_Fun()">Click Here</button>
    <p id="GFG_DOWN"
       style="color: green;
              font-size: 24px;
              font-weight: bold;">
    </p>
 
    <!-- Script to display the device screen width -->
    <script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    el_up.innerHTML = "Click on the button to get the"
    + " width and height of the window";
 
    function GFG_Fun() {
        el_down.innerHTML = "Width:"
        + document.documentElement.clientWidth
        + " pixels"
        + ", "
        + "Height:"
        + document.documentElement.clientHeight
        + " pixels";
    }
    </script>
</body>
 
</html>

Output:

documentElement.client Method




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!