|
31 | 31 | |25 | [Check if a string is a valid JSON](#Check-if-a-string-is-a-valid-JSON)| |
32 | 32 | |26 | [getBoundingClientRect](#getBoundingClientRect)| |
33 | 33 | |27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)| |
| 34 | +|28 | [Notify when element size is changed](#Notify-when-element-size-is-changed)| |
34 | 35 |
|
35 | 36 |
|
36 | 37 |
|
@@ -577,4 +578,21 @@ observer.observe(image); |
577 | 578 |
|
578 | 579 | ``` |
579 | 580 | |
| 581 | +**[⬆ Back to Top](#table-of-contents)** |
| 582 | +### Notify when element size is changed |
| 583 | +see our codepen: https://codepen.io/JSsnippets/pen/dyYoYVX |
| 584 | +```javascript |
| 585 | +const foo = document.getElementById("foo"); |
| 586 | + |
| 587 | +const observer = new ResizeObserver((entries) => { |
| 588 | + for (let entry of entries) { |
| 589 | + const cr = entry.contentRect; |
| 590 | + console.log = `Size: ${cr.width}px X ${cr.height}px`; |
| 591 | + } |
| 592 | +}); |
| 593 | +observer.observe(foo); |
| 594 | + |
| 595 | + |
| 596 | +``` |
| 597 | + |
580 | 598 | |
0 commit comments