ResizeObserver监听页面元素变化

前提:对整个浏览器窗口大小变化监听,我们可以采用【resize】事件进行监听。如果浏览器大小没有变化,但里面某个元素的宽高变化了,我们该怎么监听呢?比如使用【echarts】渲染图表后,某个dom的宽高变化了之后需要执行【echartsInstance. resize 】,那我们该怎么监听dom元素的变化,那就是使用【ResizeObserver】

文档链接:https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver/ResizeObserver

1 let  resizeObserver = null
2 resizeObserver  = new ResizeObserver(() => {
3       // 宽高等变化后需要执行的逻辑
4 });
5 resizeObserver.observe(需要监听的dom);
6 // 注意:销毁周期时也需要销毁掉这个监听
7 resizeObserver.unobserve(需要监听的dom)

 

 

 

posted @   蛙仔  阅读(402)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示