JavaScript | ResizeObserver Interface
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) {
}
});
|
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) {
console.log( 'Height: ' , entry.contentRect.height);
console.log( 'Width:' , entry.contentRect.width);
}
});
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
Last Updated :
31 Oct, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...