JavaScript ResizeObserver Interface

Last Updated : 11 Oct, 2024

The ResizeObserver interface monitors changes in the dimensions of an element and delivers notifications to the observer whenever those changes occur.

This API improves performance and usability compared to traditional methods of monitoring size changes, which often relied on inefficient hacks or constant polling every few milliseconds, leading to significant performance drawbacks.

By using the ResizeObserver, developers gain better control and efficiency when tracking element size changes, making it a valuable tool for responsive design and dynamic layouts.

Using the ResizeObserver

A ResizeObserver object is first created using the ResizeObserver() constructor. This constructor has a callback parameter that can be used to specify the function to be called whenever a resize is observed. The callback parameter has 2 parameters:

The entries parameter contains objects of ResizeObserverEntry that can be used to access the new dimensions of the element after each change.
The observer parameter which is the reference to the observer itself.

Syntax:

let resizeObserver = new ResizeObserver((entries) => {
        for (entry of entries) {
            // access the entry properties
        }
 });

The ResizeObserver.observe() method is used to start observing the required element for changes. The element that has to be monitored is passed to this method as a parameter.

Example 1: Get the height and width of the element when changes are observed

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Resize Observer API</title>
    <style>
        #box {
            resize: both;
            border: solid;
            background-color: green;
            height: 100px;
            width: 300px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1 style="color: green">GeeksForGeeks</h1>
    <b>Resize Observer API</b>
    <p>Check the current dimensions of the div:</p>
    <div id="box">GeeksForGeeks</div>

    <p id="dimensions"></p> <!-- To display dimensions -->

    <script>
        const boxElem = document.querySelector('#box');
        const dimensions = document.getElementById('dimensions'); 
      	// Reference to the dimensions paragraph

        let resizeObserver = new ResizeObserver((entries) => {
            for (const entry of entries) {
                // Get the height and width of the element
                const height = entry.contentRect.height;
                const width = entry.contentRect.width;

                // Update the text content of the dimensions paragraph
                dimensions.textContent = 
                  `Height: ${height}px, Width: ${width}px`;

            }
        });

        // Observe the given element for changes
        resizeObserver.observe(boxElem);
    </script>
</body>

</html>

Output:

Example 2: Change the text size of an element depending on the height

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Resize Observer API</title>
    <style>
        #box {
            resize: both;
            border: solid;
            background-color: green;
            height: 100px;
            width: 300px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h1 style="color: green">GeeksForGeeks</h1>
    <b>Resize Observer API</b>
    <p>Check the dimensions of the div below:</p>

    <div id="box">GeeksForGeeks</div>

    <p>
        Height: <span id="boxHeight">100</span> px<br>
        Width: <span id="boxWidth">300</span> px
    </p>

    <script>
        const boxElem = document.querySelector("#box");
        const heightDisplay = document.querySelector("#boxHeight");
        const widthDisplay = document.querySelector("#boxWidth");

        let resizeObserver = new ResizeObserver(entries => {
            for (let entry of entries) {
                // Update the displayed dimensions
                heightDisplay.textContent = Math.round(entry.contentRect.height);
                widthDisplay.textContent = Math.round(entry.contentRect.width);

                // Optionally, you can also change font size based on height
                boxElem.style.fontSize = entry.contentRect.height / 10 + 'px'; 
            }
        });

        resizeObserver.observe(boxElem);
    </script>
</body>

</html>

Output:

Supported Browsers:

The browser supported by ResizeObserver Interface are listed below:

Chrome 64
Firefox 69
Opera 51

JavaScript ArrayBuffer resize() Method

sayantanm19

Improve

Article Tags :

JavaScript ResizeObserver Interface

Using the ResizeObserver

Syntax:

Supported Browsers:

Similar Reads

Thank You!

What kind of Experience do you want to share?