我可以使用MutationObserver来监听计算样式的变化吗？

Question

我可以使用MutationObserver来监听计算样式的变化吗？我有一个宽度为100%的div,我想知道它的计算宽度何时发生变化,但到目前为止还没有成功.如果我务实地更改样式,MutationObserver会起作用:

document.getElementById("myDiv").style.width = "200px"

但是,如果通过窗口调整大小或父div重新调整大小来调整接口大小,则它不起作用.

任何不涉及超时的解决方案？

更新:我对一个也不会涉及监听窗口调整大小事件的解决方案特别感兴趣,因为有时界面会在没有调整窗口大小的情况下发生变化.例如,具有宽度百分比和父节点大小的div更改.

Answer 1

正在讨论对观察风格变化的支持.现在你可以利用过渡.我们的想法是为元素添加宽度(或其他)的css过渡.转换的持续时间几乎为零,因此您不会注意到它.

转换完成后,将transitionend触发一个事件.为该事件添加侦听器.现在每当宽度改变时,转换将开始,立即结束并且事件将触发.这意味着你的听众将被召唤.

#myDiv {
  ...
  transition: width 0.01s;
}

$("#myDiv").on("transitionend", function () { ... } );

由IE10 +支持