jquery -如何确定div是否更改了其高度或任何css属性？
jquery -如何确定div是否更改了其高度或任何css属性？
提问于 2012-03-09 11:15:40
我想知道当div改变其高度或任何css属性时如何触发事件。
我有一个id = mainContent的div。我希望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:在这种情况下，我知道我可以使用按钮事件来做这件事，但我希望div在高度改变时触发事件。请帮帮忙。提前谢谢。
回答 1
Stack Overflow用户
发布于 2015-04-11 02:42:51
为了将来的缘故，我会把这篇文章贴出来。如果你不需要支持< 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 documentation
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9628450
复制相关文章
相似问题
腾讯云开发者
