javascript - 如何在JS中检测div元素宽度何时发生变化(而不是窗口大小调整)？

Question

我有一个场景，如果 div 元素宽度发生变化，我需要执行一些功能。那么有没有办法检测元素宽度变化(而不是窗口大小调整)。

例如， 我有一个宽度为 300px 的 DIV 元素，渲染页面时我的窗口为 800px。当我触发一个函数时，我将 div 元素宽度更改为 400px，因此对于默认宽度更改，我需要执行一些操作，那么有没有什么方法可以在纯 JavaScript 中检测元素大小更改？

Answer 1

完美的解决方案是 ResizeObserver ，因为它比轮询更有效，并且还可以检测由于动态 CSS 单元、过渡、动画等引起的变化。

截至 2022 年，it's already supported in all mainstream browsers .

const elem = document.querySelector('#sizeobserver')

new ResizeObserver(console.log).observe(elem)

#sizeobserver {
   resize: both;
   overflow: hidden;
   border: 1px solid black;
}

<div id="sizeobserver">Resize me!</div>

要忽略高度变化，您可以检查 contentRect 的 width 属性。现在仅记录宽度的更改:

const elem = document.querySelector('#sizeobserver')
{ // <--Just to encapsulate prevWidth
  let prevWidth
  new ResizeObserver(changes => {
    for(const change of changes){
      if(change.contentRect.width === prevWidth) return
      prevWidth = change.contentRect.width

      //Code here:
      console.log(change)
    }
  }).observe(elem)
}

#sizeobserver {
   resize: both;
   overflow: hidden;
   border: 1px solid black;
}

<div id="sizeobserver">Resize me!</div>