The ResizeObserver Interface is used to provide a mechanism to monitor the changes to the dimensions of an element. The notifications of the changes are delivered to the observer whenever changes take place.
This is a useful API as traditional methods of monitoring the changes were composed of hacks or were poor in performance. The traditional methods included checking the size once a few milliseconds which had a massive performance hit. This Interface solves these problems and gives more control to determine the changes.
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
<!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 console to know the current dimensions of the div.</p> <div id="box">GeeksForGeeks</div> <script> boxElem = document.querySelector('#box') let resizeObserver = new ResizeObserver((entries) => { for (entry of entries) { // get the height and width of the element console.log('Height: ', entry.contentRect.height); console.log('Width:', entry.contentRect.width); } }); // observe the given element for changes resizeObserver.observe(boxElem); </script> </body> </html> |
Output:
- Before Resizing the element:
- After Resizing the element:
Example 2: Change the text size of an element depending on the height
<!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 console to know the current dimensions of the div.</p> <div id="box">GeeksForGeeks</div> <script> boxElem = document.querySelector("#box"); let resizeObserver = new ResizeObserver(entries => { for (entry of entries) { boxElem.style.fontSize = entry.contentRect.height + 'px'; } }); resizeObserver.observe(boxElem); </script> </body> </html> |
Output:
- Before Resizing the element:
- After Resizing the element:
Supported Browsers: The browser supported by ResizeObserver Interface are listed below:
- Chrome 64
- Firefox 69
- Opera 51