ResizeObserver API

ResizeObserver

ResizeObserver fires a callback when an element's size changes — more precise than window.resize for responding to element-level size changes.

Example

const box = document.getElementById("resizable");

const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Box is ${width.toFixed(0)}px × ${height.toFixed(0)}px`);
    box.textContent = `${width.toFixed(0)} × ${height.toFixed(0)}`;
  }
});

observer.observe(box);

JAVASCRIPT

Full Editor

Pro Tip

ResizeObserver replaces the need for window.resize listeners in component-level code.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned