ResizeObserver
ResizeObserver
est une interface javascript, utilisable dans tous les navigateurs récents, sauf évidemment Internet Explorer. ResizeObserver()
crée et retourne un nouvel objet Resize Observer.
Méthodes
observe()
: Initialise la surveillance sur un élément de typeElement
,unobserve()
: Stoppe le surveillance sur un élément particulier,disconnect()
: Stoppe toutes les surveillance initiées parobserve()
.
Exemple
On dispose d’une division avec l’identifiant myId
dont on veut surveiller les variations de taille.
1 2 3 4 5 6 7 8 9 10 |
// Element to observe const myID = document.getElementById('myId'); // Callback for resize observer on #myId element const myID_size = () => { console.log('MyID width: ', myID.clientWidth ); console.log('MyID height: ', myID.clientHeight ); } new ResizeObserver(myID_size).observe(myID) |
Et hop, un moyen simple et efficace pour détecter les changement de taille d’un élément.