jQuery-如何确定div是否更改其高度或任何CSS属性？
我想知道当div更改其高度或任何CSS属性时如何触发事件。
我有一个id =的div 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>
我试图separator根据mainContent高度的mainContent变化来调整div id = 的高度。
PS：在这种情况下，我知道我可以使用button事件来执行此操作，但是我希望div在更改高度时触发该事件。请帮忙。提前致谢。
问题答案：
首先，没有开箱即用的css-changes事件，但是您可以自己创建一个，仅onchange用于:input元素。不适用于CSS更改。
有两种跟踪CSS更改的方法。
- 每x次（示例中为500毫秒）检查DOM元素的css变化。
- 当触发事件 您 更改元素的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的更改，第二个选择是更优雅，更有效的方法。
资料：
- 绑定：
Description: Attach a handler to an event for the elements. - 触发：
Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
-
我正在创建一个快速响应的网站。我使用类似这样的方法来隐藏一些用于移动显示的元素： 现在我需要从高度方面检查一些元素。我尝试了这个：，但我不知道为什么它不起作用。还需要注意的是，我需要一个，我想要这个条件： 如何使用CSS实现上述条件？
-
问题内容： 我如何断言页面的CSS已在Watin 2.1中成功加载并应用了其样式？ 问题答案： 在进行了一些研究并写下我的答案之后，我偶然发现了该链接，该链接解释了您需要了解的有关CSS的所有信息，何时加载CSS以及如何检查CSS。 实际上，所提供的链接对它的解释很好，以至于我在其中添加了一些引用以供将来参考。 如果您好奇，我的答案将是＃2和＃4的变体。 何时真正加载样式表？ … 顺便说一句，让我
-
问题内容： 我有一个如下所示的div页面 样式 我想调整div的高度以填充（或拉伸到）整个div （标有绿色边框），并且不想越过页脚divD。我该如何解决？ 问题答案： 只需添加到造型。应该没有必要。
-
问题内容： 这是一个非常简单的问题，因此我将对其进行简短介绍： 如何判断特定DOM元素的CSS属性是否被继承？ 我问的原因是因为使用的方法，它将返回计算的样式，该样式继承了父对象的CSS属性。有没有办法检索在对象本身上设置的属性？ 一个例子可以解释我的进步： CSS： HTML： 因此，在继承的实例中，如何判断它是否被继承了？ 显然会给我，但我想检索元素 本身 的样式，而不是其父元素。 问题答案：
-
我有一个包含文本区域的div。这个div有一个边框：1px纯黑。现在，当用户在textarea中键入时，textarea将增长。 我有这个密码- 现在外部div（外部到文本区域）也随之增长。但这种高度的变化并没有体现在边框上。边界留在那里。如果可能的话，我该如何实现呢？ PS-当我在Chrome（Ctrl Shift I）中看到时，我的外部潜水高度会增加，但是边界没有反映这种变化。 HTML- C
-
问题内容： 我创建了一个UIAlertController 但是之后，我想更改UIAlertController的高度吗？我怎样才能做到这一点？ 问题答案： 我发现您可以在显示视图控制器之前添加约束