Question

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

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

但是如果通过调整窗口大小或者父div调整大小来调整接口大小，它就不起作用。

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

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

Answer 1

观察样式更改的支持是in discussion。现在你可以利用过渡。我们的想法是为元素添加宽度（或其他）的css过渡。转换的持续时间几乎为零，因此您不会注意到它。

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

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

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

由IE10 +

支持