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

一尘不染

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

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

阅读 269

2020-05-16

共1个答案

一尘不染

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

2020-05-16