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的变化。
- 检查DOM元素每x次更改css（示例中为500毫秒）。
- 触发一个事件，当你改变元素的CSS。
- 使用
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>
脚步：
- 我们创build了DIV块元素来调整操作的大小
- 添加简单的JavaScript代码：
- jQuery绑定
- jQuery resizer与触发器操作“resize” – 触发器是我的例子中最重要的事情
- resize后，您可以检查浏览器警报信息
就这样。 😉
