HTML DOM onresize Event

The HTML DOM onresize event occurs on the browser window resize. Only the <body> tag support this event. To get the size of the window use:

clientWidth, clientHeight
innerWidth, innerHeight
outerWidth, outerHeight
offsetWidth, offsetHeight

In HTML:

<element onresize="myScript">

HTML

<!DOCTYPE html>
<html>
<body onresize=
"document.getElementById('try').innerHTML = parseInt(document.getElementById('try').innerHTML) + 1">
 <p>Resized count: <span id="try">0</span></p>
</body>
</html>

In JavaScript:

object.onresize = function(){myScript};

HTML

<!DOCTYPE html>
<html>
<body>
 <p>Resized count: <span id="try">0</span></p>
 <p onresize="GFGfun()">
  </p>
  <script>
   let c = 0;
   function GFGfun() {
    let res = c += 1;
    document.getElementById("try").innerHTML = res;
   }
  </script>
 </body>
</html>

In JavaScript, using the addEventListener() method:

object.addEventListener("resize", myScript);

HTML

<!DOCTYPE html>
<html>
<body>
 <p>Resized count: <span id="try">0</span></p>
 <script>
  window.addEventListener("resize", GFGfun);
  let c = 0;
  function GFGfun() {
   let res = c += 1;
   document.getElementById("try").innerHTML = res;
  }
 </script>
</body>
</html>

Explore