jQuery-如何确定div是否更改其高度或任何CSS属性？

71

我想知道当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在更改高度时触发该事件。请帮忙。提前致谢。

javascript jquery css

— 忍者男孩
source

你想达到什么目的？

— Blender 2012年

我想根据mainContent div的高度自动调整分隔符div的高度。确定，我将编辑我的问题。

— NinjaBoy 2012年

我认为您应该为此使用CSS。您可以发布问题演示吗（现场演示很好）？

— Blender 2012年

2

@Blender我想将其发布在jsfiddle.net中，但今天不能进入该网站。

— NinjaBoy 2012年

您是在问div的高度何时被另一段代码更改，还是由于用户调整浏览器的大小而何时更改了？（还是两者兼有？）

— nnnnnn 2012年

62

首先，没有开箱即用的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.

— gdoron支持莫妮卡
source

if（$ element.css（'height'）=='bar'）中的bar是什么？

— NinjaBoy 2012年

@NinjaBoy。很高兴能为您提供帮助，请参阅更新，因为它包含另一个选项。

— gdoron在2012年

heightChange是默认的jquery函数吗？

— NinjaBoy 2012年

或更简单$('#mainContent').height(400).trigger('resize');

— Lorenzo Polidori

任何需要定期检查的解决方案很可能会导致性能下降，而不是事件驱动的解决方案。

— Jan Werkhoven，2015年

51

请不要使用此处其他答案中描述的技术。它们要么无法处理css3动画的大小更改，浮动布局更改，要么不能用于jQuery领域。您可以使用基于事件的调整大小检测器，而不会浪费您的CPU时间。

https://github.com/marcj/css-element-queries

它包含一个ResizeSensor类，您可以使用该类。

new ResizeSensor(jQuery('#mainContent'), function(){ 
    console.log('main content dimension changed');
});

免责声明：我写了这个库

— 马克·施密特
source

效果很好！我见过的最佳解决方案-并不完美，因为在短时间内发生多个调整大小的触发器时（例如使用调整大小的textarea时）似乎错过了一些事件，但是仍然是可行的解决方案。

— 法塔赫·哈尔萨

1

gdoron的答案仅提出了两种选择，一种是手动单击，另一种是使用计时器，这两种选择都比较糟。我发现此插件是一种更好的解决方案，因为它非常好且无缝，因为我们不需要手动捕获成功事件中的所有动态信息，因为这可能会导致高度增加。

— Tiago Duarte

这是一个很好的解决方案，但是要包含的文件很大。您必须在此处选择CPU与页面权重。对我来说，运行循环功能使DOM元素无法使用仍然是一个更好的选择。

— Gfra54 2015年

@ Gfra54，“大文件”真是个笑话。ResizeSensor.js只有144行代码。;）

— Marc J. Schmidt

对我不起作用。我错过了什么吗？我包括了两个js文件。添加对构造函数的调用，例如，将mainContent更改为div的ID（我确定其高度已更改），但从未调用过回调函数。控制台上没有例外。（我的div的高度通过角度插值更改。不知道这很重要。）

— yurin 2015年

12

为了将来起见，我将其发布。如果不需要支持<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文档以获取更多信息

— 布兰登·斯泰利
source

1

要在style属性中包含更改，您可以将其包含attributes: true在config对象中。您甚至可以attributeFilter: ['style']组合使用以仅更改样式。

— Brandon.Staley 2015年

看起来真的很酷。因此，您说的是width和height是style属性的一部分，因此更改它们将生成对给定回调的调用，该调用可以依次检查大小是否已更改并可能触发其他事件，例如“调整大小”，对吗？

— Alexis Wilke 2015年

1

是的，您绝对可以这样做。尽管您可能想创建自己的自定义事件名称，observedResize然后触发它。

— Brandon.Staley，2015年

看来使用resize:vertical;不会产生变化。看看它在这里使用javascript调整大小jsfiddle.net/jfo57rdd

— Brandon.Staley，2016年

@ Brandon.Staley当div中包含图像时，此功能不起作用。在第一种情况下，图片未加载且div大小设置为0，加载后div大小增加，但是未触发观察方法

— Santhosh

2

另一个简单的例子。

对于此示例，我们可以使用100x100 DIV框：

<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>

脚步：

我们创建了DIV块元素以调整操作大小
使用以下命令添加简单的JavaScript代码：
- jQuery绑定
- 带有触发器动作“调整大小”的jQuery调整器-触发器是我的示例中最重要的事情
调整大小后，您可以查看浏览器警报信息

就这样。;-)

— 皮特·斯蒂普涅夫斯基
source

而且...抱歉我的英语不好...我没有足够的时间上英语学校。：-/

— PiotrStępniewski2013年

11

您自己触发大小调整事件吗？我想问题是在用户生成事件时（增加/减小浏览器窗口大小）来处理事件-不是您。

— 列维