Skip to content
Related Articles

Related Articles

How to calculate Width and Height of the Window using JavaScript?
  • Last Updated : 31 Jan, 2020

Given an HTML document that is running on a Window. The task is to find the height and width of the window using JavaScript.

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.




<!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:
Before clicking on the button:

After clicking on the button:

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




<!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:
Before clicking on the button:

After clicking on the button:




My Personal Notes arrow_drop_up
Recommended Articles
Page :