There is no direct element resize event support in JavaScript. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element but resize events are only fired on the window object.
Alternatively, you can use ResizeObserver.
new ResizeObserver(() => console.log("resizing")).observe(container);Otherwise, you will probably have to poll using setInterval and check the size.
JavaScript element resize event
A simple example code resize event in container div.
<!DOCTYPE html>
<html>
<body>
<div class="container"></div>
<script>
var container = document.getElementsByClassName("container")[0];
new ResizeObserver(() => console.log("Resizingd div")).observe(container);
</script>
</body>
</html>
Output:
Using ResizeObserver API: This is the modern and recommended way to observe changes to the size of DOM elements. It allows you to observe changes to the size of an element’s content area, border-box, or padding box. Here’s how you can use it:
// Create a new instance of ResizeObserver
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
// Call your callback function here, passing the entry
console.log('Element resized:', entry.target);
}
});
// Select the element you want to observe
const targetElement = document.querySelector('.element-to-observe');
// Start observing the target element
observer.observe(targetElement);Using onresize Event: This method is older and less preferred, but still works. It involves attaching an event listener to the window object and checking for changes in the size of the element. Here’s how you can do it:
// Define a function to handle resize events
function handleResize() {
// Perform actions when the element is resized
console.log('Element resized');
}
// Select the element you want to observe
const targetElement = document.querySelector('.element-to-observe');
// Attach the resize event listener
window.addEventListener('resize', handleResize);Another way to detect element resizing is by using the window.resize event in combination with checking the dimensions of the element at regular intervals. However, this method is less efficient and might not provide as accurate results as ResizeObserver, especially for complex layouts.
// Check element size at regular intervals
setInterval(() => {
const element = document.querySelector('.resize-element');
const width = element.offsetWidth;
const height = element.offsetHeight;
console.log('Element size:', width, height);
}, 1000); // Check every second
Do comment if you have any doubts or suggestions on this Js event topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version