ResizeObserver

JavaScript 🟡 Mid

Definition

API qui observe les changements de taille d'un element DOM. Appelle le callback quand les dimensions changent, sans dependre du resize de la fenetre.

Analogie

Un metre automatique colle sur un meuble qui t'alerte des que les dimensions changent.

Exemple de code

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`${width}x${height}`);
  }
});
observer.observe(document.querySelector('.chart'));

Cas d'usage

Graphiques responsifs, conteneurs flexibles, composants qui s'adaptent a leur taille.

#core#DOM#responsive