Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 excluding scrollbars, toolbars, and other browser UI elements.
There are two main approaches to calculate the inner height and inner width of a window:
Using innerHeight and innerWidth properties ? The window.innerHeight and window.innerWidth properties return the viewport dimensions including padding but excluding scrollbars.
Using the clientHeight and clientWidth properties ? The document.documentElement.clientHeight and document.documentElement.clientWidth properties return the viewport dimensions excluding scrollbars and are more reliable across different browsers.
Syntax
Inner height property is used to calculate the height of a window content area:
window.innerHeight // or document.documentElement.clientHeight
Inner width property is used to calculate the width of a window content area:
window.innerWidth // or document.documentElement.clientWidth
Using window.innerHeight and window.innerWidth
The window.innerHeight and window.innerWidth properties provide the most direct way to get viewport dimensions:
<html>
<head>
<title>Calculate Inner Height and Inner Width</title>
</head>
<body>
<p id="text1">Click the button to get window dimensions</p>
<button onclick="calculateHeightAndWidth()">Get Dimensions</button>
<p id="text2"></p>
<script>
function calculateHeightAndWidth(){
var height = window.innerHeight;
var width = window.innerWidth;
document.getElementById("text2").innerHTML =
"Height: " + height + " pixels, Width: " + width + " pixels";
}
</script>
</body>
</html>
Using document.documentElement.clientHeight/Width
This approach is more reliable for cross-browser compatibility and excludes scrollbars:
<html>
<head>
<title>Calculate Inner Height and Inner Width</title>
</head>
<body>
<p id="text1">Click the button to get viewport dimensions</p>
<button onclick="calculateHeightAndWidth()">Get Dimensions</button>
<p id="text2"></p>
<script>
function calculateHeightAndWidth(){
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
document.getElementById("text2").innerHTML =
"Height: " + height + " pixels, Width: " + width + " pixels";
}
</script>
</body>
</html>
Using document.body.clientHeight/Width
This method targets the body element specifically. Note that document.documentElement refers to the <html> element while document.body refers to the <body> element:
<html>
<head>
<title>Calculate Inner Height and Inner Width</title>
</head>
<body>
<p id="text1">Click the button to get body dimensions</p>
<button onclick="calculateHeightAndWidth()">Get Dimensions</button>
<p id="text2"></p>
<script>
function calculateHeightAndWidth(){
var height = document.body.clientHeight;
var width = document.body.clientWidth;
document.getElementById("text2").innerHTML =
"Body Height: " + height + " pixels, Body Width: " + width + " pixels";
}
</script>
</body>
</html>
Comparison
| Method | Includes Scrollbars | Browser Support | Use Case |
|---|---|---|---|
window.innerHeight/Width |
No | Modern browsers | Getting viewport size |
document.documentElement.clientHeight/Width |
No | All browsers | Cross-browser compatibility |
document.body.clientHeight/Width |
No | All browsers | Body element dimensions |
Conclusion
Use window.innerHeight and window.innerWidth for modern browsers, or document.documentElement.clientHeight/Width for better cross-browser support. These properties are essential for responsive design and dynamic layout calculations.
707 Views
