jQuery的 – 如何确定一个div是否改变其高度或任何css属性?

我想知道如何触发一个事件,当一个div改变其高度或任何css属性。

我有一个div ID = mainContent 。 我想jQuery的自动触发事件,当它改变其高度。 我做了这样的事情:

$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});

我知道它错了。

这里是我的整个代码(我粘贴了所有的代码,因为我不知道为什么不能进入jsfiddle):

 <html> <head> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #separator { border-right: 1px solid black; } </style> <script type="text/javascript" src="jquery1.6.4min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $("#separator").css('height', $("body").height()); }); $(function() { $("#btnSample1").click(function() { $("#mainContent").css('height', '400px'); $("#mainContent").css('width', '600px'); $("#mainContent").css('background-color', '#F0F0F0'); }); $("#btnSample2").click(function() { $("#mainContent").css('height', '1600px'); $("#mainContent").css('width', '700px'); $("#mainContent").css('background-color', '#F0F0F0'); }); $("#mainContent").change('height', function() { $("#separator").css('height', $("#mainContent").height()); }); }); </script> </head> <body> <table style="width: 100%;"> <tr> <td valign="top" style="width: 19%;"> <table id="mainMenu"> <tr><td><input id="btnSample1" type="button" value="Sample 1" /></td></tr> <tr><td><input id="btnSample2" type="button" value="Sample 2" /></td></tr> </table> </td> <td valign="top" style="width: 1%;" > <div id="separator"></div> </td> <td valign="top" style="width: 80%;"> <div id="mainContent"></div> </td> </tr> </table> </body> </html> 

我试图根据mainContent的高度每当mainContent的高度改变时调整div id = separator的高度。

PS:在这种情况下,我知道我可以使用button事件来做到这一点,但我希望div的高度改变时触发事件。 请帮忙。 提前致谢。

首先,没有这样的CSS变化事件,但你可以自己创build一个,因为onchange只用于:input元素。 不为css更改。

有两种方法来跟踪css的变化。

  1. 检查DOM元素每x次更改css(示例中为500毫秒)。
  2. 触发一个事件,当改变元素的CSS。
  3. 使用DOMAttrModified突变事件。 但它已被弃用 ,所以我会跳过它。

第一种方法:

 var $element = $("#elementId"); var lastHeight = $("#elementId").css('height'); function checkForChanges() { if ($element.css('height') != lastHeight) { alert('xxx'); lastHeight = $element.css('height'); } setTimeout(checkForChanges, 500); } 

第二种方式:

 $('#mainContent').bind('heightChange', function(){ alert('xxx'); }); $("#btnSample1").click(function() { $("#mainContent").css('height', '400px'); $("#mainContent").trigger('heightChange'); //<==== ... }); 

如果你控制的CSS变化,第二个选项是更多的优雅和有效的方式来做到这一点。

单证:

  • bind : Description: Attach a handler to an event for the elements.
  • trigger : Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

请不要使用其他答案中描述的技术。 他们要么不处理css3animation大小的变化,浮动布局的变化或不是来自jQuery土地的变化。 您可以使用resize检测器,基于事件的方法,不会浪费您的CPU时间。

https://github.com/marcj/css-element-queries

它包含一个ResizeSensor类,可以用于这个目的。

 new ResizeSensor(jQuery('#mainContent'), function(){ console.log('main content dimension changed'); }); 

免责声明:我写了这个库

为了将来的缘故,我会张贴这个。 如果你不需要支持<IE11,那么你应该使用MutationObserver。

这里是一个链接到caniuse js MutationObserver

简单的用法与强大的结果。

  var observer = new MutationObserver(function (mutations) { //your action here }); //set up your configuration //this will watch to see if you insert or remove any children var config = { subtree: true, childList: true }; //start observing observer.observe(elementTarget, config); 

当你不需要再观察时,只需断开连接。

  observer.disconnect(); 

查看MDN文档以获取更多信息

另一个简单的例子

对于这个例子,我们可以使用100×100 DIV-box:

 <div id="box" style="width: 100px; height: 100px; border: solid 1px red;"> Red box contents here... </div> 

和小jQuery技巧:

 <script type="text/javascript"> jQuery("#box").bind("resize", function() { alert("Box was resized from 100x100 to 200x200"); }); jQuery("#box").width(200).height(200).trigger("resize"); </script> 

脚步:

  1. 我们创build了DIV块元素来调整操作的大小
  2. 添加简单的JavaScript代码:
    • jQuery绑定
    • jQuery resizer与触发器操作“resize” – 触发器是我的例子中最重要的事情
  3. resize后,您可以检查浏览器警报信息

就这样。 😉