HTML | DOM onresize Event
The HTML DOM onresize event occurs on browser window resize. Only <body> tag support this event.
To get the size of window use:
- clientWidth, clientHeight
- innerWidth, innerHeight
- outerWidth, outerHeight
- offsetWidth, offsetHeight
Syntax:
- In HTML:
<element onresize="myScript">
- In JavaScript:
object.onresize = function(){myScript}; - In JavaScript, using the addEventListener() method:
object.addEventListener("resize", myScript);
Example:
<!DOCTYPE html><html> <head> <title>HTML DOM onresize event</title></head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <h2>HTML DOM onresize event</h2> <p>Resize the window</p> <p>Resized count: <span id="try">0</span></p> </center> <script> window.addEventListener("resize", GFGfun); var c = 0; function GFGfun() { var res = c += 1; document.getElementById("try").innerHTML = res; } </script> </body> </html> |
Output:
Supported Browsers: The browsers supported by HTML DOM onresize Event are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
