ResizeObserver使用方法

如何检测元素大小发生变化？

没有元素会无缘无故的发生变化，可能是窗口大小发生变化，我们可以监听window的resize事件；但很多情况是由于页面元素的变化（添加，删除）引起的，这种情况处理起来就比较麻烦了，大多数情况也是通过自定义事件来处理。

ResizeObserver提供了更直接的方法，直接监听元素的尺寸变化。

使用方式：

// 定义ResizeObserver对象，并设置监听方法
const myObserver = new ResizeObserver(entries => {
  // handleResize(entries)
})

const contentEle = document.querySelector('.content')
const staticEle = document.querySelector('p')

// 添加要监听的元素
myObserver.observe(staticEle)
myObserver.observe(contentEle)

监听方法参数是一个数组，每个数组对象为大小发生变化的元素：

由上图可以看到，每个对象都有target和contentRect属性，其中contentRect属性又包括width, height, x, y, top, right, bottom, left。这和getBoundingClientRect非常类似。

由于是比较新的方法，所以兼容性很差：