How to use resize event In Javascript
We can add an event listener to the body element which fires whenever the window size is resized.
Example: This example shows the use of the above-explained approach.
html
<!DOCTYPE html><html><head> <title> How to detect and resize the window size </title> <style> body { text-align: center; } h1 { color:green; } </style></head><body> <h1>w3wiki</h1> <h3> Resizing the screen size and display its <br>corresponding width and height </h3> <div id="height">Height: <span></span></div> <div id="width">Width: <span></span></div> <script> const height = document.querySelector("#height span"); const width = document.querySelector("#width span"); // Insert values on load of page window.onload = function() { height.innerHTML = window.innerHeight; width.innerHTML = window.innerWidth; }; // Change values when window is resized window.onresize = function() { // Setting the current height & width // to the elements height.innerHTML = window.innerHeight; width.innerHTML = window.innerWidth; }; </script></body></html> |
Output:
How to detect when the window size is resized using JavaScript ?
How to detect when the window size is resized using JavaScript ?
Sometimes when we develop our site, we want to detect the size of the window, In this article, we are going to learn how to detect when the window size is resized using JavaScript
The window resize event occurs whenever the size of the browser window gets changed. We can listen to the resize event in two ways:
Table of Content
- Using resize event
- Using ResizeObserver API
- Using addEventListener() Method
Contact Us