Nin*_*Boy 65 javascript css jquery
我想知道当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:在这种情况下,我知道我可以使用按钮事件来执行此操作,但我希望div在高度更改时触发事件.请帮忙.提前致谢.
gdo*_*ica 58
首先,有没有这样的CSS-变化事件开箱即用,但您可以创建一个由你自己,因为onchange是:input唯一的元素.不是为了改变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.Mar*_*idt 48
请不要使用此处其他答案中描述的技术.他们要么不使用css3动画大小更改,浮动布局更改或不来自jQuery land的更改.您可以使用调整大小检测器,这是一种基于事件的方法,不会浪费您的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文档