javascript - 如何知道何时更改 DOM 中元素的尺寸

Question

我有这个代码

document.getElementById("container").addEventListener("scroll", function () {
 console.log("scroll Event...");
});
function WrapText() {
 document.getElementById("container").classList.add("WrapText");
}

div {
 width:100%;
 height:50px;
 background-color:yellow;
 overflow: auto;
}
div.WrapText{
 height:100%;
}

<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<button onClick="WrapText()">Wrap Text</button>

当我这样做时Scroll我通过事件 onScroll 检测到它并在控制台中显示一条消息。

现在，当我按Wrap Text时按钮，我缩放窗口并将其调整为文本。

问题:
我不知道如何通过 addEventListener() 检测最后一个事件，也就是说，如何知道何时重新调整 DOM 中元素的尺寸？

注意:
解决方案必须通过附加到 <div id ="container"> 的事件处理程序来解决，这一点很重要。就像我们对事件 onScroll 所做的那样，而不是对应用于元素 <Button> 的事件 onClick 所做的那样.

Answer 1

如果您使用 jQuery 可以使用:

$('#container').bind('height-changed',function(){...});
$('#container').css({height:'100%'});
$('#container').trigger('height-changed');

要在 DOM 对象的样式发生变化时捕获更多事件，请尝试使用:

var event = new $.Event('style');

或

var observer = new MutationObserver(<<function>>)