How to Capture Browser Window Resize Event in JavaScript

Answer: Use the `addEventListener()` Method

You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window.addEventListener('resize', ...).

The following example will display the current width and height of the browser window on resize.

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
<div id="result"></div>

<script>        
// Defining event listener function
function displayWindowSize(){
    // Get width and height of the window excluding scrollbars
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    
    // Display result inside a div element
    document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
}
    
// Attaching the event listener function to window's resize event
window.addEventListener("resize", displayWindowSize);

// Calling the function for the first time
displayWindowSize();
</script>
<p><strong>Note:</strong> Please resize the browser window to see how it works.</p>
</body>
</html>

You should avoid using the solution like window.onresize = function(event) { ... };, since it overrides the window.onresize event handler function. You should better assign a new event handler to the resize event using event listener, as shown in the example above.

Please check out the tutorial on JavaScript event listeners to learn more about it.

Related FAQ

Here are some more FAQ related to this topic:

Previous Page Next Page

How to Capture Browser Window Resize Event in JavaScript

Answer: Use the addEventListener() Method

Example

Related FAQ

About Us

Contact

Interactive Tools

Answer: Use the `addEventListener()` Method