How to find the inner height and inner width of a browser window in JavaScript?


In this article we are going to learn how to find the inner height and inner width of a browser window using JavaScript.

JavaScript defines window object methods and properties. The properties include inner height and inner width, which helps us to calculate the height and width of a window’s content area.

There are two ways to calculate the inner height and inner width of a window.

  • Using innerHeight and innerWidth properties − To get the inner height and inner width JavaScript has provided some properties such as window.innerHeight and window.innerwidth respectively. Using these properties, it is easy to find the height and width of a browser window. Let's discuss them individually.

  • Using the clientHeight and clientWidth properties − Similarly, the Element.clientHeight and Element.clientWidth properties returns the inner height and width (respectively) of the current element in pixels. If the element doesn’t have any CSS the values of these properties are 0.

Syntax

Inner height property is used to calculate the height of a window content area. The syntax for Inner height property is as follows −

window.innerHeight or document.documentElement.clientHeight

Inner width property is used to calculate the height of a window content area. The syntax for Inner Width property is as follows −

Window.innerWidth or document.documentElement.clientWidth

Example 1

The below example uses innerHeight and innerWidth properties of the window object to return the height and width of a window.

<html>
<head>
   <title>To calculate Inner Height and Inner Width of a window</title>
</head>
<body>
   <p id="text1"></p>
   <button onclick="calculateHeight()">Click Here</button>
   <p id="text2"></p>
   <script>
      text1.innerHTML = "Click the below button to calculate Height of a window";
      function calculateHeightAndWidth(){
         var height = window.innerHeight;
         var width = window.innerWidth;
         text2.innerHTML = " Height : "+height+" pixels"+" Width: "+width+" pixels";
      }
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 2

The below example uses clientHeight and clientWidth properties of the window object to return height and width of a window.

<html>
<head>
   <title>To calculate Inner Height and Inner Width of a window</title>
</head>
<body>
   <p id="text1"></p>
   <button onclick="calculateHeight()">Click Here</button>
   <p id="text2"></p>
   <script>
      text1.innerHTML = "Click the below button to calculate Height of a window";
      function calculateHeightAndWidth(){
         var height = document.documentElement.clientHeight;
         var width = document.documentElement.clientWidth;
         text2.innerHTML = " Height : "+height+" pixels"+" Width: "+width+" pixels";
      }
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 3

The below example uses document.body.clientHeight/Width to calculate the height and width of a window. The difference between the above and below example is that the document.documentElement gives the html element and document.body gives the body element.

<html>
<head>
   <title>To calculate Inner Height and Inner Width of a window</title>
</head>
<body>
   <p id="text1"></p>
   <button onclick="calculateHeight()">Click Here</button>
   <p id="text2"></p>
   <script>
      text1.innerHTML = "Click the below button to calculate Height of a window";
      function calculateHeightAndWidth(){
         var height = document.body.clientHeight;
         var width = document.body.clientWidth;
         text2.innerHTML = " Height : "+height+" pixels"+" Width: "+width+" pixels";
      }
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Updated on: 08-Dec-2022

432 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements