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>

在上面的示例中，我在观察#foo的同时更改#bar的大小。 #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');
});

Answer 2

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>

观察HTMLElements的隐式大小变化

2 个答案: