使用JQuery檢測div的高度變化

Question

我想每當div有高度變化時觸發一個函數。我怎樣才能做到這一點？

Answer 1

$(document).ready(function(){ 
    var divHeight = $("#share-something-textarea").css("height"); 
    setInterval(function(){ 
     if(divHeight !== $("#share-something-textarea").css("height")){ 
      //something here 
     } 
    },200); 
}); 

我想你可以設置一個setInterval來驗證每個x毫米的div高度。

Answer 2

有多種方法可以實現這一點，無論如何，我認爲這個解決方案是迄今爲止最好的。 有一個名爲Jquery Mutate的Jquery庫，正是爲這樣的事情創建的。

（Current Supported events：width，height，top，right，left，bottom，hide，show，scrollHeight，scrollWidth，scrollTop，scrollLeft）。

如果你想每一個div有高度變化的時間以觸發功能，你可以做這樣的事情：

首先導入庫：

<script src="http://www.google.com/jsapi"></script> 
<script> google.load("jquery",'1.7'); google.load("jqueryui", "1"); </script> 
<script src="mutate.events.js"></script> 
<script src="mutate.min.js"></script> 

然後你就可以使用這個代碼：

$('#div').mutate('height',function (element,info){ 
    console.log('a div changed it\'s height, the function below should do something about this...'); 
    $(this).css('background','red'); <-- example of action triggered after the event height changed 
}); 

這裏你可以找到jQuery的變異的官方網站：http://www.jqui.net/jquery-projects/jquery-mutate-official/

而一個演示，顯示它是多麼靈活：http://www.jqui.net/demo/mutate/

Answer 3

一個好辦法是使用DOM突變來驗證標記的特定部分的每一個變化。

例如，您可以使用jQuery mutate official plugin來檢測是否更改某物的高度並啓動回調。

你可以試試這個：

$('div.monitor').mutate('height',function (element,info){ 
     console.log('a div with has changed it\'s height, the function below should do something about this...'); 
     $(this).css('background','red'); 
});