Open In App

JavaScript | ResizeObserver Interface

Improve
Improve
Like Article
Like
Save
Share
Report

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:
    note-dimen-change-before
  • After Resizing the element:
    note-dimen-change-after

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:
    change-text-height-before
  • After Resizing the element:
    change-text-height-after

Supported Browsers: The browser supported by ResizeObserver Interface are listed below:

  • Chrome 64
  • Firefox 69
  • Opera 51


Last Updated : 31 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads