How to calculate Width and Height of the Window using JavaScript ? Last Updated : 18 Nov, 2021 Comments Improve Suggest changes Like Article Like Report 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.innerHeightReturn 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 PropertyExample 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 Comment More infoAdvertise with us Next Article How to calculate Width and Height of the Window using JavaScript ? S SHUBHAMSINGH10 Follow Improve Article Tags : JavaScript Web Technologies HTML JavaScript-Misc Similar Reads How to get the Width and Height of an Image using JavaScript? Given an image and the task is to get the width and height of the image using JavaScript. The width and height property is used to display the image width and height. Syntax for width:let width = this.width;Syntax for height:let height = this.height;Example 1: This example selects the image and then 2 min read How to get the image size (height & width) using JavaScript? To get the size of an image (height and width), Element.clientHeight and Element.clientWidth properties are used. Element.clientHeight: We can access the inner height of an element with this property. This height includes the padding but not the margin and border. Element.clientWidth: We can access 2 min read How to get the div height using JavaScript ? In this article, we will see How to get the div height using Javascript. We can do this by following ways: Using the offsetHeight property.Using the clientHeight property.Using getBoundingClientRect() Method. Method 1: Using the offsetHeight property: The offsetHeight property of an element is a rea 3 min read How to get the Width of Scroll bar using JavaScript? Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth 3 min read How to find the width of a div using vanilla JavaScript? To measure the width of a div element we will utilize the offsetWidth property of JavaScript. This property of JavaScript returns an integer representing the layout width of an element and is measured in pixels. Below are the different approaches to finding the width of a div using vanilla JavaScrip 3 min read How to get the Element's Actual Width and Height in JavaScript? In JavaScript, it is often necessary to retrieve the actual width and height of an HTML element. This information can be useful in a variety of scenarios, such as setting the size of an element dynamically, centering an element on the page, or determining the size of an element for animation purpose 5 min read How to detect when the window size is resized using JavaScript ? Sometimes when we develop our site, we want to detect the size of the window, In this article, we are going to learn how to detect when the window size is resized using JavaScriptThe window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event in 3 min read Calculate the width of the text in JavaScript Calculating the width of text in JavaScript refers to determining the pixel width that a specific string of text will occupy when rendered in a browser. This is commonly done using the Canvas API or by creating a hidden element with similar styling to measure the text.Here we have some common approa 3 min read How to specify the width and height of the canvas using HTML ? The <canvas> tag in HTML is used to draw graphics on web page using JavaScript. It can be used to draw paths, boxes, texts, gradient, and adding images. By default, it does not contain borders and text. Syntax: <canvas id="canvasID"> HTML Contents... <canvas> Attributes: The canvas 1 min read How to dynamically set the height and width of a div element using jQuery ? Set the height of a div element using jQueryThe content height of a div can be dynamically set or changed using height(), innerHeight(), and outerHeight() methods depending upon the user requirement. If the user wants to change the content height of a div dynamically, it includes changing the actual 7 min read Like