jquery - 如何确定一个div是否更改其高度或任何css属性？ [英] jquery - How to determine if a div changes its height or any css attribute?
问题描述
我想知道当div改变其高度或任何css属性时如何触发事件。
我有一个div id = mainContent 。我想让jquery自动触发一个事件，当它改变其高度。我做了这样的事情：
$（＃mainContent）change（'height'，function（）{
$（＃separator）css（'height'，$（＃mainContent）。 / code>
}）;
I知道它的错误。
这是我的整个代码（我粘贴所有的，因为我不能进入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 / javascriptsrc =jquery1.6.4min.js> < / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（＃separator）css（'height'，$（body）。 ）;
$（function（）{
$（＃btnSample1）click（function（）{
$（＃mainContent）。css 'cs（'width'，'600px'）;
$（＃mainContent）。 click（function（）{
$（＃mainContent）。css（'height';'FooF0F0'）;
}）;
$（＃btnSample2 ，'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 =topstyle =width：19％;>
< table id =mainMenu>
< tr>< td>< input id =btnSample1type =buttonvalue =Sample 1/>< / td>< / tr>
< tr>< td>< input id =btnSample2type =buttonvalue =Sample 2/>< / td>< / tr>
< / table>
< / td>
< td valign =topstyle =width：1％; >
< div id =separator>< / div>
< / td>
< td valign =topstyle =width：80％;>
< div id =mainContent>< / div>
< / td>
< / tr>
< / table>
< / body>
< / html>
我试图调整div的高度id = 每当 mainContent 的高度发生变化时，基于 mainContent 的高度。
PS：在这种情况下，我知道我可以使用按钮事件来做到这一点，但是我想要div改变时触发事件。请帮忙。提前感谢。
首先，没有这样的CSS更改事件开箱即用，但你可以创建一个你自己的，因为 onchange 仅用于：input 元素。不适用于css更改。
有两种方法来跟踪css更改。
- 每x次（示例中为500毫秒）检查css更改的DOM元素。
- 您更改元素css时触发事件。
- 使用
DOMAttrModified突变事件。但它是已弃用 - Examine the DOM element for css changes every x time(500 milliseconds in the example).
- Trigger an event when you change the element css.
- Use the
DOMAttrModifiedmutation event. But it's deprecated, so I'll skip on it. - 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.
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更改，第二个选项是一个更优雅和高效的方式。
文档：
I wanna know how to trigger an event when a div changes its height or any css attribute.
I have a div with id = mainContent. I want jquery to automatically trigger an event when it changes its height. I did something like this:
$("#mainContent").change('height', function() {
$("#separator").css('height', $("#mainContent").height());
});
I know its wrong.
Here's my whole code (I pasted all of it because I can't get into jsfiddle for some reason I don't know):
<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>
I am trying to adjust the height of the div id=separator based on the height of mainContent whenever the height of mainContent changes.
PS: In this case I know I can use the button event to do this but I want the div to trigger the event when the height is changed. Please help. Thanks in advance.
First, There is no such css-changes event out of the box, but you can create one by your own, as onchange is for :input elements only. not for css changes.
There are two ways to track css changes.
First way:
var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
if ($element.css('height') != lastHeight)
{
alert('xxx');
lastHeight = $element.css('height');
}
setTimeout(checkForChanges, 500);
}
Second way:
$('#mainContent').bind('heightChange', function(){
alert('xxx');
});
$("#btnSample1").click(function() {
$("#mainContent").css('height', '400px');
$("#mainContent").trigger('heightChange'); //<====
...
});
If you control the css changes, the second option is a lot more elegant and efficient way of doing it.
Documentations:
这篇关于jquery - 如何确定一个div是否更改其高度或任何css属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
