In JavaScript, the onresize event is typically triggered when the browser window is resized. To determine the dimensions of the window, we can utilize the properties window.outerWidth and window.outerHeight. Additionally, JavaScript offers several other properties, including innerWidth, innerHeight, clientWidth, clientHeight, offsetWidth, and offsetHeight, which can be employed to ascertain the size of a particular element.
In HTML, we have the capability to utilize the onresize attribute and link a JavaScript function to it. Alternatively, we can employ JavaScript's addEventListener method and provide a resize event to enhance flexibility.
Syntax
At this point, let's examine the syntax for implementing the onresize event in both HTML and JavaScript, including approaches that do not utilize the addEventListener method as well as those that do employ it.
In HTML
<element onresize = "fun()">
In JavaScript
object.onresize = function() { myScript };
In JavaScript by using the addEventListener method
object.addEventListener("resize", myScript);
Let’s examine several examples to grasp the functionality of the onresize event.
Example
In this illustration, we are demonstrating the use of the HTML onresize attribute. In this context, we will utilize the JavaScript properties window.outerWidth and window.outerHeight to retrieve the dimensions, specifically the height and width, of the browser window.
As the user adjusts the size of the window, the modified width and height will be shown on the display. Additionally, it will keep track of the number of attempts made by the user to resize the window. When the window's height is altered, the displayed height will be updated in real-time. Likewise, any modifications to the window's width will result in the corresponding width being adjusted accordingly.
<!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>
Output
Upon executing the code provided above, the resulting output will be -
Upon attempting to adjust the window size, the resulting output will be -
Example - Using JavaScript
In this instance, we are utilizing the onresize event provided by JavaScript.
<!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>
Output
Upon running the aforementioned code, the result will be -
Upon attempting to adjust the window size, the resulting output will be -
Example - Using addEventListener method
In this illustration, we will utilize the addEventListener function provided by JavaScript.
<!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>
Output
Upon running the code provided above, the resulting output will be -
When we attempt to adjust the size of the window, the resulting output will be -