当另一个 CSS 值更改时更改 CSS 值的方法？答案

【问题标题】：A way to change a CSS value when another CSS value changes?当另一个 CSS 值更改时更改 CSS 值的方法？
【发布时间】：2025-11-30 13:25:01
【问题描述】：

我的 div 结构如下：

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

编辑：

对不起，我忘记了结构的几个重要部分。

head、graphData 和 graph 都将其 min-heights 设置为 300 像素。

我的问题是当graphData's min-height 增加或减少时，如何更改head 和graph's min-height 以匹配graphData's min-height？有什么方法可以通过 jQuery 或 javascript 检测 css 样式更改？

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

【问题讨论】：

标签： javascript jquery css

【解决方案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 稍微小一点。更频繁地运行检查...

【讨论】：

嗯，不是 setInterval 解决方案的忠实拥护者，尽管这肯定会起作用。
@ste - 这完全取决于内容更改其大小的频率。我承认这是更多的“蛮力”解决方案。
是的，它更暴力但绝对是一个好的开始。当然，从原始问题中很难判断出整个页面的需求，因此也很难判断哪个解决方案是“最好的”。也许我只是倾向于对一个页面上有许多 JS 计时器的可能性有强烈的反应。
没有采用 setInterval 解决方案，但您的 .height 建议对我有所帮助。 :)

【解决方案2】：

在 CSS 中没有真正的事件系统（嗯，jQuery 有一个）。这取决于您的图形元素的变化方式。如果用户与任何元素交互时它的高度发生变化，您可以使用 jQuery 的点击功能：

$("#myElement").click(function() {
  $("#head").addClass("higher"); // change height or something
});

【讨论】：

啊哈！很高兴知道 CSS 没有事件系统。不错的帖子和很好的解决方案。
@chr - 而是使用较新的 jQuery 1.7+ on('click') 语法来绑定事件处理程序...
如果高度变化是从 AJAX 回调启动的，也可以使用此方法...

【解决方案3】：

jQuery: How to listen for DOM changes?

你可能会想要阅读这篇文章。

基本上，我认为您想要做的是将事件侦听器绑定到图表的 div 上（文档将等待并侦听发生在它身上的任何事件）。它需要监听的事件是 CSS 的变化（可能是 DOMSubtreeModified 事件，但我会寻找样式属性修改事件，不确定是否存在）。

当对图表的更改触发时，处理头部 div。

【讨论】：

【解决方案4】：

你可以使用这个插件http://benalman.com/projects/jquery-resize-plugin/

【讨论】：

虽然理论上可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。我们希望将精彩的内容带到这个网站，而不是把用户送到别处去寻找答案:)

【解决方案5】：

可以并排设置，也可以将min-height: inherit设置为内部div。

【讨论】：