Search notes:

DOM example: onresize

The window.onresize property calls the assigned function (event handler) when the window is resized.

<!DOCTYPE html>
<html>
<head 
  <me a content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>onchange</title>

  <style>
   body {
      margin: 0;
      height: 100vh;
      background-color: #fff730;
   }
  </style>

  <script type="text/javascript">
    var out_cnt, out_clientWidth, out_clientHeight, out_innerWidth, out_innerHeight;

    function resized() {
      out_cnt.innerHTML ++;

      out_clientWidth .innerHTML = document.body.clientWidth;
      out_clientHeight.innerHTML = document.body.clientHeight;
      out_innerWidth  .innerHTML = window.innerWidth;
      out_innerHeight .innerHTML = window.innerHeight;

    }
    
    function main(elem) {

      window.onresize = resized;

      out_cnt          = document.getElementById('cnt'         );
      out_clientWidth  = document.getElementById('clientWidth' );
      out_clientHeight = document.getElementById('clientHeight');
      out_innerWidth   = document.getElementById('innerWidth'  );
      out_innerHeight  = document.getElementById('innerHeight' );

      out_cnt.innerHTML = 0;

      resized();

    }

  </script>
</head>
<body onload='main()'>

  <table>
    <tr><td>Counter:     </td><td><span id='cnt'         ></span></td></tr>
    <tr><td>clientWidth: </td><td><span id='clientWidth' ></span></td></tr>
    <tr><td>clientHeight:</td><td><span id='clientHeight'></span></td></tr>
    <tr><td>innerWidth:  </td><td><span id='innerWidth'  ></span></td></tr>
    <tr><td>innerHeight: </td><td><span id='innerHeight' ></span></td></tr>
  </table>

</body>
</html>

Github repository about-Document-Object-Model, path: /Events/onresize.html

DOM example: onresize

See also