Javascript 获取首选的div高度

我使用chrome扩展来折叠网页上的某些分区。这一切都很好。我这样做的，它的高度是50px，当你把鼠标悬停在它上面时，它就变成了通常的高度。简而言之，我的代码就是这样做的：

• 检查div的高度->检查高度
• 应用CSS规则：最大高度：50px
• 将CSS规则应用于悬停：最大高度：checkedHeight

---

这很有魅力。但是当div加载额外内容时，它会变长。是否可以将“最大高度”设置为元素的首选高度？我知道我不能使用最大高度，但我想使用css3转换使div逐渐扩展。

你能不能在悬停时设置

max height:none

这是一个

功能崩溃（目标）{
target.style.maxHeight='50px'；
}
功能扩展（目标）{
target.style.maxHeight=target.scrollHeight+'px'；
}
#试验{
最大高度：50px；
背景：浅灰色；
溢出：隐藏；
-moz跃迁：1s；
-ms转换：1s；
-o-转变：1s；
-webkit转换：1s；
过渡：1s；
}
文本
文本
文本
文本
文本
文本
文本
文本
文本

文本
文本
文本
文本
文本
文本
文本
文本
文本

文本
文本
文本
文本
文本
文本
文本
文本
文本

最大高度：自动？我可以。但不会有过渡。最大高度A到B将使div从小高度过渡到大高度。从“A”到“无”不会转换，它会突然出现。在悬停时将“最大高度”设置为一个高的数字，如999px，怎么样？我试过了。它的工作原理是，它仍然可以动画显示一切。但也有一个主要的缺点。如果你想保存，比如说，以10000作为最大高度，而你的div只有500px高，你会将转换速度提高20倍，这意味着你看不到转换，然后调整转换速度来考虑额外的长度？这是个好主意。只是它会跑得太长。动画可以这样运行20秒。这意味着，如果我用鼠标再次将其折叠，大约需要20秒才能看到预期效果？

<script>
    function collapse(target) {
        target.style.maxHeight = '50px';
    }
    function expand(target) {
        target.style.maxHeight = target.scrollHeight + 'px';
    }
</script>

<style>
    #test {
        max-height: 50px;
        background:lightgray;
        overflow: hidden;

        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
        -webkit-transition: 1s;
        transition: 1s;
    }
</style>

<div id="test" onmouseover="expand(this)" onmouseout="collapse(this)">
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
    text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>