如何知道什麼時候改變元素的尺寸在DOM

我有這樣的代碼如何知道什麼時候改變元素的尺寸在DOM

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">，因爲我們做的活動，而不是針對事件的onClick應用於元素<Button>onScroll的事件處理程序是很重要的。

來源

2017-05-17 fwBasic

你」你已經在做了嗎？你知道什麼時候有人點擊了，這就是你應該使用的。其他任何可能只是試圖解決X/Y問題。 – adeneo

檢查突變觀察者。 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver –

您的問題尚不清楚。如果您想在滾動時調整#container div的大小，請在該事件處理函數中調用'WrapText（）'。 – AndrewR

如果你使用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>>)

來源

2017-05-17 18:22:58 randiel

如何知道什麼時候改變元素的尺寸在DOM

回答

相關問題