观察 HTMLElements 的隐式大小变化

Question

虽然 MutationObserver 允许监视 HTMLElement 属性的显式大小更改，但它似乎没有 way/config 允许我监视隐式更改它的大小，由浏览器计算。

这是一个例子：

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>

在上面的示例中，我正在更改 #foo 的大小，同时观察 #bar。 #bar get 被 #foo 压缩（它的宽度隐式改变，因为浏览器计算它的宽度而不是我明确指定它）。

如何检测此类隐式大小更改？

Answer 1

Hi just take the javascript part to the end of the body

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .container {
            display: flex;
            align-items: stretch;
            
        }

        .child {
            width: 200px;
            height: 100px;
            margin: 0 2px;
            background: magenta;
        }
       
    </style>
   
</head>

<body onload="">

    <div class="container">
        <div class="child" id="foo"></div>
        <div class="child" id="bar"></div>
    </div>
    <script>
        const observer = new MutationObserver(changes => {
            console.log('changed')
        });

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

        document.querySelector('#foo').style.width = '400px'
    </script>
</body>
</html>

Answer 2

...但是，调整大小事件仅触发（发送到）window 对象 :: 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');
});

观察 HTMLElements 的隐式大小变化

Observe implicit size changes on HTMLElements

javascript

mutation-observers