用javascript改变div的高度

Posted 2023-03-06

【中文标题】用javascript改变div的高度

【英文标题】：Change height on div with javascript

【发布时间】：2013-04-08 21:09:58

【问题描述】：

当 div 的高度超过 100px 时，我想在 div 上设置高度。

例如，当 div 的内容使 div 的高度填充超过 100px 时，我希望它自动适应到 200 px。

【问题讨论】：

您可以在纯 javascript 中使用 getElementById('id').style 或在 jQuery 中使用 $('#id').css (...) 获取/设置 css？你有什么问题？

【参考方案1】：

你可以试试

if($("divID").height() > 100)
    $("divID").css("height","200px");

【参考方案2】：

我认为min-height CSS 属性是您正在寻找的：

div#myDiv 
    min-height: 100px;
    height: auto; 
    display: block; /* float won't work */

这应该自动调整您的 div 的大小以动态包装其全部内容。

【参考方案3】：

您可以做到这一点的一种方法是确保元素 CSS 中没有“高度”属性（内联样式很好）。然后，当内容改变时调用这个函数：

if ($('#myDiv').height() > 100) 
    // Div is larger than 100px so increase it to 200px
    $('#myDiv').css('height', '200px');

【讨论】：

问题是，每当该 div 的内容发生变化时，您都必须调用此函数。不确定这是否是他们正在寻找的东西，但当然可以。

【参考方案4】：

您可以只使用 CSS 的 min-height 和 max-height。

div#myDiv 
min-height: 100px;
height: auto;
max-height: 200px;

你也可以使用 javascript 做一些事情，但是这样你也可以有高度为 150px 或 120px 的可能性。如果你不想那样，你应该用javascript方式来做。