How to Capture Browser Window Resize Event in JavaScript

3444 views 1 year ago Javascript

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.

<!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>

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]