如何在jQuery中检测和更改div高度

时间:2011-07-17 19:59:28

标签: javascript jquery

首先让我说,由于布局的复杂设计,我最终编写了一个名为equalHeights的函数,它基本上在我的布局中查看几个div并选择最高并将休息高度设置为,所以我最终可以得到具有相同高度的div。所以基本上在页面加载之后,如果你查看代码,你会看到style =“height:xxx”应用于每个div。这个我无法改变,所以任何解决方案都无法触及此功能。

div也有溢出设置为隐藏,它再次有其目的,不能改变。

因此,考虑到上述情况,我需要做的是能够根据用户交互性的变化更改div的高度。例如,我有一个带有一些隐藏行的表,当用户点击链接时会扩展这些行。然后,由于溢出,表格的额外长度将被隐藏,我需要扩展div的大小。同时我不想将此扩展绑定到特定的点击,我希望Javascript检测内容的变化并相应地扩展我的div。我不希望它像这样绑定的原因是因为我需要在具有相同布局的不同页面中实现它,并且我不想为每个事件编写代码。

我试过了两个:

$("#myDiv").resize(function(){
    equalHeight($("#myDiv"));
});

$("#myDiv").content().resize(function(){
    equalHeight($("#myDiv"));
});

似乎都不起作用!有什么想法吗?

4 个答案:

答案 0 :(得分:8)

基本的resize事件只能绑定到$(window),如果你想将resize事件绑定到div,你需要使用一个插件:

http://benalman.com/projects/jquery-resize-plugin/

答案 1 :(得分:1)

您可以在功能中触发自己的div事件。因此,它不会强制您重写单击函数。

http://jsfiddle.net/JKByC/7/

答案 2 :(得分:0)

假设您显示了一定数量的行,您可以检查一个大于该数字的数字,然后相应地设置div的样式。

答案 3 :(得分:0)

        var last_height = $('#div').css('height');

        $(window).resize(function() {
            if($('#div').css('height') != last_height)
            {
                last_height = $('#div').css('height');
                //do what you want
            }
        });