javascript - 观察 HTMLElements 上的隐式大小变化

Question

虽然 MutationObserver 允许监视 HTMLElement 属性的显式大小更改，但它似乎没有一种方法/配置允许我监视其大小的隐式更改，这些更改是由浏览器。

这是一个例子:

const observer = new MutationObserver(changes => {
  console.log('changed')
})

observer.observe(document.querySelector('#bar'), {
  attributes: true
})

document.querySelector('#foo').style.width = '200px'

.container {
  display: flex;
  align-items: stretch;
}

.child {
  width: 100px;
  height: 100px;
  margin: 0 2px;
  background: magenta;
}

<div class="container">
  <div class="child" id="foo"></div>
  <div class="child" id="bar"></div>
</div>

在上面的示例中，我在观察 #bar 的同时更改了 #foo 的大小。 #bar 被 #foo 压扁(它的宽度隐式改变，因为浏览器计算它的宽度而不是我显式指定它)。

如何检测这种隐式大小变化？

Answer 1

...但是，调整大小事件仅在(发送到)窗口对象上触发::MDN

新标准是::Resize Observer

new ResizeObserver(()=>console.log('bar dimension changed :: RO!')).observe(bar);

但是虽然它仅适用于 Chrome 晚期，但我建议使用一些库，例如: CSS-Element-Queries

<script src="css-element-queries-1.0.0/src/ResizeSensor.js"></script>
<script src="css-element-queries-1.0.0/src/ElementQueries.js"></script>
new ResizeSensor(bar, function(){ 
    console.log('bar dimension changed :: CSS-Element-Queries');
});