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

A way to change a CSS value when another CSS value changes?

本文关键字：CSS 方法 另一个 一种      更新时间：2023-09-26

我有如下结构的div：

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

编辑：

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

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

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

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

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。更频繁地运行检查。。。

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

$("#myElement").click(function() {
  $("#head").addClass("higher"); // change height or something
});
jQuery：如何监听DOM更改？

你可能会想读一遍这本书。

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

当对图形的更改触发时，处理头分区。

您可以使用此插件http://benalman.com/projects/jquery-resize-plugin/

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

相关文章：