What is cross-browser window resize events in JavaScript?

Javascript Web Development Front End Technology

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>

Seetha

Published on 31-Jan-2018 09:18:17

Previous Page Print Page