--- title: Resize Observer API slug: Web/API/Resize_Observer_API tags: - API - Draft - Element - Monitor - Overview - Reference - Resize Observer - Resize Observer API - observe translation_of: Web/API/Resize_Observer_API ---
{{DefaultAPISidebar("Resize Observer API")}}
L'API Resize Observer fournit un mécanisme performant par lequel du code peut surveiller les changements de dimensions d'un élément et un observateur recevoir des notifications chaque fois que les dimensions changent.
Il y a une multitude de cas d'utilisation pour des techniques de responsive design (et d'autres par ailleurs) qui répondent à des changements de dimensions d'un élément mais, avant, leur implantation était souvent amateures et parfois imparfaites.
Par exemple, les media queries / {{domxref("window.matchMedia")}} sont un bon outil pour mettre à jour une mise en page à des points spécifiques quand la zone d'affichage change de dimensions, mais qu'en est-il si vous désirez changer la mise en page en réponse à un changement spécifique des dimensions d'un élément qui n'est pas le conteneur principal ?
Pour réaliser ceci, une solution limitée serait d'écouter les changements sur un type d'événement qui convienne à résoudre le problème et qui corresponde à l'élément dont les changements de dimensions vous intéresse (c'est-à-dire l'événement resize sur window), puis de calculer les nouvelles dimensions ou autres propriétés de l'élément après un redimensionnement au moyen de {{domxref("Element.getBoundingClientRect")}} ou de {{domxref("Window.getComputedStyle")}}, par exemple.
Une telle solution tend à ne fonctionner que pour des cas d'utilisation limités, causer des soucis de performance (continuellement appeler les méthodes évoquées ci-avant résulterait en une grosse baisse de performance), et souvent ne fonctionnera quand les dimensions de la fenêtre du navigateur ne sont pas changées.
L'API Resize Observer fournit une solution adaptée à résoudre exactement ces types de problèmes, et plus encore, en vous permettant d'observer aisément et de répondre à des changements dans les dimensions du content-box ou du border box d'un élément, et ce d'une manière performante. Elle fournit une solution en JavaScript au manque souvent dénoncé de requêtes sur les éléments sur la plate-forme web.
Son utilisation est simple et presque identique aux autres observateurs tels que le Performance Observer ou l'Intersection Observer. Il vous faut créer un nouvel objet {{domxref("ResizeObserver")}} en utilisant le constructeur ResizeObserver()
, puis utiliser {{domxref("ResizeObserver.observe()")}} pour le faire observer les changements de dimensions d'un élément spécifiques. Une fonction de rappel fournise au constructeur sera exécutée à chaque fois que les dimensions changent, fournissant un accès aux nouvelles dimensions et vous permettant de faire tous ce que vous souhaitez faire en réponse à ces changements.
Vous trouverez plusieurs exemples basiques sur notre dépôt GitHub :
<div>
extérieure change de taille selon la valeur d'une jauge de sélection. Celà montre que vous pouvez répondre à des changement de dimensions d'un élément même s'ils n'ont rien en rapport avec la fenêtre du navigateur.Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):
const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { if(entry.contentBoxSize) { entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) + (entry.contentBoxSize.blockSize/10)) + 'px'; } else { entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) + (entry.contentRect.height/10)) + 'px'; } } }); resizeObserver.observe(document.querySelector('div'));
Spécification | État | Commentaire |
---|---|---|
{{SpecName('Resize Observer')}} | {{Spec2('Resize Observer')}} | Définition initiale. |
{{Compat("api.ResizeObserver")}}