javascript - 一种在另一个 CSS 值更改时更改 CSS 值的方法？

Question

我的 div 结构如下:

<div id='head'>
    <div class='graphData'>
        <table>...</table>
    </div>
    <div class='graph'>...</div>
</div>

编辑:

抱歉，我忘记了结构的几个重要部分。

head、graphData 和 graph 都将它们的 min-heights 设置为 300px。

我的问题是当 graphData 的 最小高度增加还是减少？有什么方法可以通过 jQuery 或 javascript 检测 css 样式更改？

graphData 的高度因从我的数据库中动态生成的行而发生变化。

Answer 1

CSS 或 jQuery 没有内置方法来检测这种性质的变化。 您可能会想到做的是每隔一段时间检查元素的高度并将它们与最后一个已知值进行比较。如果有差异，那就意味着高度发生了变化。

var oldHeight = $("#graph").height();

var heightChangeTimer = setInterval(function(){
  var newHeight = $("#graph").height();
  if (newHeight != oldHeight){
   oldHeight = newHeight;
   // do some actions on height change...
  }
},100);

目前，我已将间隔设置为每 100 毫秒一次，但您可以调整该值以满足您的需要 - 或许使其略小一些 IE。更频繁地运行检查...