Article Categories

Selected Reading

Execute a script when the browser window is being resized in HTML?

HTML Web Development Front End Technology

The onresize attribute in HTML executes a JavaScript function when the browser window is resized. This event is commonly used to adjust layouts, recalculate dimensions, or trigger responsive behavior when users change their window size.

Syntax

Following is the syntax for the onresize attribute −

<element onresize="function()">Content</element>

The onresize attribute is typically used on the <body> element or <window> object to detect when the entire browser window is resized.

Using onresize with Alert

Following example shows how to trigger an alert when the browser window is resized −

<!DOCTYPE html>
<html>
<head>
   <title>Window Resize Event</title>
</head>
<body onresize="display()" style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Resize Window Event Demo</h2>
   <p>Resize the browser window to trigger the event.</p>
   <script>
      function display() {
         alert("Web browser window resized!");
      }
   </script>
</body>
</html>

When you resize the browser window, an alert dialog will appear with the message "Web browser window resized!"

Resize Window Event Demo
Resize the browser window to trigger the event.
(Alert appears when window is resized)

Displaying Window Dimensions

A more practical example shows the current window dimensions when resized −

<!DOCTYPE html>
<html>
<head>
   <title>Window Dimensions on Resize</title>
</head>
<body onresize="showDimensions()" style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Window Resize Tracker</h2>
   <p>Resize the window to see current dimensions:</p>
   <div id="dimensions" style="background-color: #f0f0f0; padding: 15px; border-radius: 5px; margin-top: 10px;">
      Window Size: Not yet measured
   </div>
   <script>
      function showDimensions() {
         var width = window.innerWidth;
         var height = window.innerHeight;
         document.getElementById("dimensions").innerHTML = 
            "Window Size: " + width + " x " + height + " pixels";
      }
      
      // Show initial dimensions when page loads
      showDimensions();
   </script>
</body>
</html>

This example displays the current window width and height in pixels, updating in real-time as you resize the window.

Window Resize Tracker
Resize the window to see current dimensions:
Window Size: 1024 x 768 pixels (updates dynamically)

Using addEventListener Method

The modern JavaScript approach uses addEventListener instead of the HTML attribute −

<!DOCTYPE html>
<html>
<head>
   <title>Modern Resize Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Modern Resize Event Handling</h2>
   <p>This example uses addEventListener for better code organization.</p>
   <div id="info" style="background-color: #e8f4fd; padding: 15px; border-radius: 5px; margin-top: 10px;">
      Resize count: 0
   </div>
   <script>
      let resizeCount = 0;
      
      function handleResize() {
         resizeCount++;
         document.getElementById("info").innerHTML = 
            "Resize count: " + resizeCount + 
            "<br>Current size: " + window.innerWidth + " x " + window.innerHeight;
      }
      
      // Add event listener when page loads
      window.addEventListener('resize', handleResize);
   </script>
</body>
</html>

This approach separates JavaScript from HTML and provides better maintainability. The counter increases each time the window is resized.

Modern Resize Event Handling
This example uses addEventListener for better code organization.
Resize count: 5
Current size: 1200 x 800

Key Points

The onresize event fires multiple times during a single resize operation as the user drags the window border.
For performance reasons, consider using throttling or debouncing techniques when performing expensive operations in the resize handler.
The event provides access to window.innerWidth and window.innerHeight for current dimensions.
Modern web development favors addEventListener over inline HTML attributes for better separation of concerns.

Browser Compatibility

The onresize event is supported by all modern browsers including Chrome, Firefox, Safari, and Edge. It works consistently across desktop and mobile platforms, making it reliable for responsive web applications.

Conclusion

The onresize attribute provides a simple way to execute JavaScript when the browser window is resized. While the HTML attribute approach works well for simple cases, using addEventListener offers better code organization and is the preferred modern approach for handling window resize events.

Daniol Thomas

Updated on: 2026-03-16T21:38:53+05:30

330 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next