前端监听dom元素改变后的尺寸获取

李卓书

于 2021-05-25 10:03:15 发布

阅读量671

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/wangbiao9292/article/details/117249639

前端专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种在Vue中利用ResizeObserver API来实时获取DOM元素尺寸变化的方法，解决了因窗口尺寸变化导致DOM元素尺寸更新不同步的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

在vue中，要获取dom元素的高度当窗口尺寸变化后；由于直接用resize等方法去监听，获取的dom元素都是改变前的；所以产生了这个需求。

解决办法

ResizeObserver

mounted() {
    this.observer = new ResizeObserver(entries=>{
      console.log(entries);
    }) 
    this.observer.observe($("#overlinebywind")[0]);
          }

用这个方法就能获取到dom改变后的尺寸大小和位置了，但是对浏览器兼容性有要求。