Question

我有2个div。如果更改了第二个div高度，第一个div应该自动改变自己的高度。

var height = jQuery('#leftcol').height();
height += 20;   
jQuery('.rightcol-botbg').height(height);

无法更改HTML标记:( 我有很多DHTML布局更改，所以我无法运行prev。代码随时。我想动态运行它。我需要做类似事件/触发器的事情。

我尝试使用jQuery('#leftcol').resize(function(){})或jQuery('#leftcol').change(function(){})。但它不起作用。（resize在窗口大小发生变化时触发。）

Answer 1

你的第一个div什么时候改变？无论什么触发器应该获得新的div高度，为它添加20并设置另一个div的高度。你能发一些代码样本吗？如果尺寸变化经常发生，那么重复检查一个尺寸并设置另一个尺寸的定时器/间隔也应该有效，但效率较低。

Answer 2

我不懂JQuery，但看起来这个问题被标记为Javascript我会给你一个Javascript解决方案

   document.getElementById("yourDivID").style.height = "300px";

编辑 - 您想知道div的高度何时发生变化？

我不知道是否有更好的方法，但我会用一个函数接近它：

function changeBlockHeight(divID, newHeight)
{
    document.getElementById(divID).style.height = newHeight + "px";
    blockHeightChanged(divID);
}

function blockHeightChanged(divID)
{
    alert("Div " + divID + " has been changed in height!");
}

代码中的某处：

<div id="testBlock"></div>
<button onlcick="changeBlockHeight('testBlock')">Test</button>

每次更改块高度时，都会调用blockHeightChanged()。

Answer 3

我会使用间隔监视另一个div，然后相应地更新

setInterval(function(){
    var height = $('#leftcol').height();
    if(height != $('#leftcol').data('oldHeight'))
    {
        $('.rightcol-botbg').height(height+20);
        $('#leftcol').data('oldHeight',height);
    }

},500)

（未测试的）

以上代码每0.5秒检查一次身高变化，然后更新.rightcol-botbg;

Answer 4

对于元素调整大小没有任何通用触发器。

在你的情况下div的尺寸变化的原因是什么？你可以在那之后或之后检查你的高度。

我能想到的唯一选择是设置一个带有setInterval的计时器，并且每隔一段时间检查一次div大小。

var myInterval = self.setInterval("myCheckFunction()",1000);

function myCheckFunction() {
    jQuery('.rightcol-botbg').height(jQuery('#leftcol').height());
}

Answer 5

使用间隔对浏览器不友好。如果您有这样的设置：

<div id="content">
   <div id="tree">should be full height</div>
   <div id="data">this one is half the height</div>
</div>

您可以使用css轻松完成此操作。我不确定是不是这样......

另外，汤姆古伦提出的解决方案是最好的解决方案。

Answer 6

使用.bind（）创建自定义事件类型，然后使用.trigger（）触发该事件。

Here是一个小例子（有点做作，但我想你会得到这个想法）

如何动态更新DIV块高度？

6 个答案: