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.
