How to calculate Width and Height of the Window using JavaScript ?
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:
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
Please Login to comment...