Skip to content

JavaScript element resize event | Solution

  • by

There is no direct element resize event support in JavaScript. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element but resize events are only fired on the window object.

Alternative you can use ResizeObserver.

new ResizeObserver(() => console.log("resizing")).observe(container);

Otherwise, you will probably have to poll using setInterval and check the size.

JavaScript element resize event

Simple example code resize event in container div.

<!DOCTYPE html>
<html>
<body>
  <div class="container"></div>
  <script>
   var container = document.getElementsByClassName("container")[0];
   
   new ResizeObserver(() => console.log("Resizingd div")).observe(container);
</script>

</body>
</html>

Output:

JavaScript element resize event

Do comment if you have any doubts or suggestions on this Js event topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published. Required fields are marked *