JavaScript onresize

The `onresize` event in JavaScript is triggered when the window is resized. It is typically used to modify the layout of the webpage when the user resizes the browser window. This event can be applied to the `window` object or any element that supports resizing.

The `onresize` event can be very useful when developing responsive web designs. You can adjust the layout, hide/show elements, or even trigger animations based on the window's size.

Syntax

In HTML


<element onresize = "fun()">

Let's understand this event by using some examples.

Example 1

In this example, we change the background color of a div element whenever the window is resized. The color changes to 'blue' when the window is resized.


<!DOCTYPE html>  
<html>  
<head>  
<script>  
var i = 0;  
  
function fun() {  
var res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;  
document.getElementById("para").innerHTML = res;  
  
var res1 = i += 1;  
document.getElementById("s1").innerHTML = res1;  
}  
</script>  
</head>  
<body onresize = "fun()">  
<h3> This is an example of using onresize attribute. </h3>  
<p> Try to resize the browser's window to see the effect. </p>  
  
<p id = "para"> </p>  
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>  
</body>  
</html>

After the execution of the above code, the output will be -

Output

When we try to resize the window, the output will be -

Output

Example 2- Using JavaScript

In this example, we are using JavaScript's onresize event. 


<!DOCTYPE html>  
<html>  
<head>  
</head>  
<body>  
<h3> This is an example of using JavaScript's onresize event. </h3>  
<p> Try to resize the browser's window to see the effect. </p>  
  
<p id = "para"> </p>  
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>  
<script>  
document.getElementsByTagName("BODY")[0].onresize = function() {fun()};  
var i = 0;  
  
function fun() {  
var res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;  
document.getElementById("para").innerHTML = res;  
  
var res1 = i += 1;  
document.getElementById("s1").innerHTML = res1;  
}  
</script>  
</body>  
</html>

After the execution of the above code, the output will be -

Output

When we try to resize the window, the output will be -

Output

Example 3- Using addEventListener() method

In this example, we are using JavaScript's addEventListener() method. 


<!DOCTYPE html>  
<html>  
<head>  
</head>  
<body>  
<h3> This is an example of using JavaScript's addEventListener() method. </h3>  
<p> Try to resize the browser's window to see the effect. </p>  
  
<p id = "para"> </p>  
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>  
<script>  
window.addEventListener("resize", fun);  
var i = 0;  
  
function fun() {  
var res = "Width = " + window.outerWidth + "<br>" + "Height = " + window.outerHeight;  
document.getElementById("para").innerHTML = res;  
  
var res1 = i += 1;  
document.getElementById("s1").innerHTML = res1;  
}  
</script>  
</body>  
</html>

After the execution of the above code, the output will be -

Output

When we try to resize the window, the output will be -

Output