Sometimes, we want to detect when a div’s dimension changed with JavaScript.
In this article, we’ll look at how to detect when a div’s dimension changed with JavaScript.
How to detect when a div’s dimension changed with JavaScript?
To detect when a div’s dimension changed with JavaScript, we use the ResizeObserver constructor.
For instance, we write
const outputSize = () => {
console.log(textbox.offsetWidth, textbox.offsetHeight);
};
outputSize();
new ResizeObserver(outputSize).observe(textbox);
to create a ResizeObserver object by calling it with outputSize.
Then we call observe with textbox to watch for size change with the textbox element.
We get the width and height of the textbox with offsetWidth and offsetHeight.
Conclusion
To detect when a div’s dimension changed with JavaScript, we use the ResizeObserver constructor.
