Open In App
Related Articles

HTML DOM onresize Event

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

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: In this example, we will see the use of DOM  onresize Event.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>HTML DOM onresize event</title>
</head>
   
<body>
    <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>
    <script>
        window.addEventListener("resize", GFGfun);
        let c = 0;
        function GFGfun() {
            let 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

Last Updated : 15 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads