Javascript 观察HTMLElements上的隐式大小更改

虽然MutationObserver允许监视HtmleElement属性的显式大小更改，但它似乎没有允许我监视由浏览器计算的对其大小的隐式更改的方式/配置

下面是一个例子：

const observer=新的MutationObserver（更改=>{
console.log（'changed'）
})
observer.observe（document.querySelector（“#bar”）{
属性：true
})
document.querySelector（'#foo'）.style.width='200px'

.container{
显示器：flex；
对齐项目：拉伸；
}
.孩子{
宽度：100px；
高度：100px；
边际：0.2px；
背景：洋红；
}

Hi只需将javascript部分放到正文的末尾
.集装箱{
显示器：flex；
对齐项目：拉伸；
}
.孩子{
宽度：200px；
高度：100px；
边际：0.2px；
背景：洋红；
}
const observer=新的MutationObserver（更改=>{
console.log（'changed'）
});
observer.observe（document.querySelector（“#bar”）{
属性：true
});
document.querySelector（'#foo'）.style.width='400px'

…但是，调整大小事件仅在窗口对象上触发（发送到）：

新标准为：

但是，虽然它仅适用于后期Chrome，但我建议使用一些库，例如：

新的尺寸传感器（条形，函数（）{
log（'bar-dimension-changed:：CSS-Element-querys'）；
});

我想你不明白我的问题是关于什么的#酒吧被#foo压扁了我还是换了对不起，不，你的答案完全错了。这与脚本加载问题无关。另外，在您假定的“修复”示例中，回调不会启动。我担心ResizeSensor和/或ElementQueries会使用轮询来确定它是否更改，这将对性能造成不利影响。你们知道他们用什么方法来确定变更吗？这两种方法都是基于事件的。在调整元素大小时触发哪个事件？如果没有，我是否能够在不使用库的情况下自己拿起它？ResizeObserver是浏览器内部技术。可从Chrome64（？）获得。Css元素查询使用requestAnimationFrame并迭代整个DOM树

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

<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');
});