Trending September 2023 # How Onresize Event Work In Javascript? Examples # Suggested October 2023 # Top 13 Popular

You are reading the article How Onresize Event Work In Javascript? Examples updated in September 2023 on the website Lanphuongmhbrtower.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 How Onresize Event Work In Javascript? Examples

Introduction to JavaScript onresize

The JavaScript onresize function is a property that can be used in event handling. It triggers whenever there is an event of resizing takes place. This event happens when the window of a particular page is resized. It is used to resize to different sizes. It can also be used with different internet browsers and used as per necessity. It is a part of the Document Object Model (DOM) and can be used very easily.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

The JavaScript onresize function can be used as below:

window.onresize = functionName;

The functionName is a function name or a function expression which will be receiving the FocusEvent object as its only argument. This function will be responsible for handling the argument sent by the FocusEvent object and take care of it.

We will also need the addEventListener() method which can be used as below:

object.addEventListener("resize", myCode);

We use the above syntax for listening to the events.

How onresize Event works in JavaScript?

The working of the onresize function is very easy.

Code:

document.getElementsByTagName(“BODY”)[0].onresize = function() {myResizeFunction()}; var x = 0; function myResizeFunction() { var edu = x += 1; document.getElementById(“demo”).innerHTML = txt; }

Here in the body we are printing the count of how many times the window is resized. The script that follows contains the onresize function. This function is calling the myResizeFunction(). We have then declared a variable x which will keep a count of the resizing. As mentioned above the onresize function takes the user defined function as a parameter and then performs its function. Here, in this function whenever the window is resized the count is incremented. It signifies that this function is calling onresize whenever the window is being resized. In addition to this we have some more functions for resizing.

When the first time program is run, then above output will be displayed. But when the window is resized then the counter will increase. To check it you can just minimize your browser window, the Event will be captured and the count will increase. Below is the output after resizing the page.

Examples of JavaScript onresize

Given below are the examples of JavaScript onresize:

Example #1

Code:

const heightOutput = document.querySelector(‘#height’); const widthOutput = document.querySelector(‘#width’); function letsresize() { heightOutput.textContent = window.innerHeight; widthOutput.textContent = window.innerWidth; } window.onresize = letsresize;

In this program we have used two variables for accepting the height and width of the window. We make use of querySelector which helps us to store the height and width. The function letsresize() is making use of different functions.

These functions are as below:

clientWidth, clientHeight

innerWidth, innerHeight

outerWidth, outerHeight

offsetWidth, offsetHeight

Output:

Example #2

The above resizing functions can also be used with addEventListener().

// Function for Event Listener function displayWinSize(){ var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; document.getElementById(“result”).innerHTML = “Width: ” + w + “, ” + “Height: ” + h; } window.addEventListener(“resize”, displayWindowSize); displayWinSize();

The above program display the width and height of the window at runtime. You can easily change the window size and see the numbers change dynamically. We have used clientWidth, clientHeight for getting the height and width as and when the event is triggered. Once we this these from the resizing functions we are displaying it by calling the function explicitly. The displayWinSize hence helps us in getting the accurate height and width of the window. This is supported by all browsers that we use. You can use these functions and get real-time size of window when they are being used. Below is the output of the above program. We have first run the program when the window was full size.

Output:

To see the change in resize figures you will have to minimize the screen. You can also resize by using the mouse and dragging it at your convenience. It will work as per expectation. The additional functions can also help you in gaining the inner height and width and also outer height and width in addition to the complete window height and width. The next output is when we minimize the window.

Output:

Conclusion

The onresize function is hence a useful function that helps us in getting the window sizes. It is triggered with the help of a user defined function. This function can have an event listener check when the window is being resized. It is useful in getting different window sizes. It is supported by all browsers which are used in our day-to-day life. onresize function helps in getting dynamic window sizes which can be used when a particular event happens.