Question

每当div的高度发生变化时，我想触发一个函数。我怎么能这样做？

Answer 1

一种好方法是使用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');
});

Answer 2

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

我认为你可以设置一个setInterval来验证每个x ms的div高度。

Answer 3

有多种方法可以实现这一目标，无论如何，我认为这个解决方案是迄今为止最好的解决方案。有一个名为Jquery Mutate的Jquery库，它是为这样的东西创建的。

（当前支持的事件：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 Mutate的官方网站：http://www.jqui.net/jquery-projects/jquery-mutate-official/

演示，展示了它的灵活性：http://www.jqui.net/demo/mutate/

使用JQuery检测div的高度变化

3 个答案: