Javascript 如何检测和更改 jQuery 中的 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6726406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect and change div height in jQuery
提问by user839124
let me start by saying that due to the complicated design of the layout I ended up writing a function called equalHeights which basically looks at several divs in my layout and picks the highest and sets the height of rest to that, so that I can end up with divs that have equal heights. So basically after the page load, if you look into the code you will see style="height:xxx" is applied to each div. This I cannot change so any solution cannot touch this functionality.
首先让我说，由于布局的复杂设计，我最终编写了一个名为 equalHeights 的函数，它基本上查看我布局中的几个 div 并选择最高的并将其余部分的高度设置为该高度，这样我就可以结束具有相同高度的 div。所以基本上在页面加载之后，如果你查看代码，你会看到 style="height:xxx" 应用于每个 div。这是我无法更改的，因此任何解决方案都无法触及此功能。
The divs also have overflow set to hidden which again has its purpose and cannot change.
div 也将溢出设置为隐藏，这再次具有其目的并且无法更改。
So with the above in mind, what I need to do is to be able to change the height of the divs based on changes due to user interactivity. For example I have a table with some hidden rows which get expanded as the user clicks on a link. The extra lenght of the table will then be hidden due to overflow, I need the size of the div to expand. At the same time I don't want to bind this expansion to that specific click, I want Javascript to detect change in the content and expand my div accordingly. The reason I don't want it bind like that is because I need this implemented in different pages with the same layout and I don't want to code for every event.
因此，考虑到上述情况，我需要做的是能够根据用户交互引起的变化来更改 div 的高度。例如，我有一个包含一些隐藏行的表，当用户单击链接时，这些行会被展开。由于溢出，表格的额外长度将被隐藏，我需要 div 的大小来扩展。同时，我不想将此扩展绑定到该特定点击，我希望 Javascript 检测内容的变化并相应地扩展我的 div。我不希望它像那样绑定的原因是因为我需要在具有相同布局的不同页面中实现它，并且我不想为每个事件编码。
I have tried both:
我都试过：
$("#myDiv").resize(function(){
equalHeight($("#myDiv"));
});
and
和
$("#myDiv").content().resize(function(){
equalHeight($("#myDiv"));
});
neither seem to work! Any ideas?
两者似乎都不起作用！有任何想法吗？
回答by Christian Nowak
The basic resize event can only be bound to $(window), you need to use a plugin if you want to be able to bind the resize event to a div:
基本的resize事件只能绑定到$(window)，如果你想能够将resize事件绑定到一个div，你需要使用一个插件：
回答by Nikolay Fominyh
You can trigger your own div event in function. So, it will not force you to rewrite click functions.
您可以在函数中触发自己的 div 事件。所以，它不会强迫你重写点击函数。
回答by ?wie?u
var last_height = $('#div').css('height');
$(window).resize(function() {
if($('#div').css('height') != last_height)
{
last_height = $('#div').css('height');
//do what you want
}
});
回答by Jason Gennaro
Assuming you have a set number of rows showing, you could check for a number greater than that and then style the divaccordingly.
假设您显示了一定数量的行，您可以检查一个大于该数量的数字，然后相应地设置样式div。
