What is cross-browser window resize events in JavaScript?


For window resize event in JavaScript, use addEventListener(). The following code will give you the size of the current window −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            margin-top: 10px;
            padding: 10px;
            background-color: #1E9E5D;
            width: 50%;
         } span {
            font-size: 50px;
         }
         </style>
         <script>
            window.addEventListener('resize', display);
            function display() {
               document.querySelector('.width').innerText = document.documentElement.clientWidth;
               document.querySelector('.height').innerText = document.documentElement.clientHeight;
            }
            display();
         </script>
      </head>
      <div>
         <span>Width= <span class="width"></span></span><br />
         <span>Height= <span class="height"></span></span>
      </div>
   </body>
</html>

Updated on: 16-Jun-2020

177 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements