Question

我有这段代码

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

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

注意：
重要的是，解决方案应通过附加到<div id ="container">的事件处理程序与事件 onScroll 一起使用，而不是应用于元素{ onClick 的事件{ {1}}。

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>>)

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

1 个答案: