JavaScript onresize event

The onresize event in JavaScript generally occurs when the window has been resized. To get the size of the window, we can use the JavaScript's window.outerWidth and window.outerHeight events. We can also use the JavaScript's properties such as innerWidth, innerHeight, clientWidth, ClientHeight, offsetWidth, offsetHeight to get the size of an element.

In HTML, we can use the onresize attribute and assign a JavaScript function to it. We can also use the JavaScript's addEventListener() method and pass a resize event to it for greater flexibility.

Syntax

Now, we see the syntax of using the onresize event in HTML and in javascript (without addEventListener() method or by using the addEventListener() method).

In HTML

In JavaScript

In JavaScript by using the addEventListener() method

Let's see some of the illustrations to understand the onresize event.

Example

In this example, we are using the HTML onresize attribute. Here, we are using the window.outerWidth and window.outerHeight events of JavaScript to get the height and width of the window.

When the user resizes the window, the updated width and height of the window will be displayed on the screen. It will also display how many times the user tried to resize the window. When we change the height of the window, the updated height will change accordingly. Similarly, when we change the width of the window, the updated width will change accordingly.

Output

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

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

Example - Using JavaScript

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

Output

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

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

Example - Using addEventListener() method

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

Output

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

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