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
Supported Tags
Syntax:
In HTML:
<element onresize="myScript">
In JavaScript:
object.onresize = function(){myScript};In JavaScript, using the addEventListener() method:
object.addEventListener("resize", myScript);Example:
html
<!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
.png)
.png)