javascript - 不能将元素高度设置为其滚动高度？

Question

由于某种原因，我无法制作平滑的 div，我试图在单击按钮时使其扩展和收缩，但它不起作用。

Javascript：

function expandContract(id) {
    var object = document.getElementById(id);
    if (object.style.height != "0px") {
        object.style.height = "0px";
    } else {
        object.style.height = object.scrollHeight;  
    }
}

HTML：

<div id='test' style='overflow:hidden;'>
Test pest fest.
</div>
<button onClick='expandContract("test");'>Expand/Contract</button>

jsFiddle

我也尝试将它设置为最大高度，但我仍然无法让它再次扩展。如果没有任何 javascript 插件，我将如何做到这一点？

Answer 1

你不见了+"px"。使用时需要设置单位（em、px、%等）style.height。因为scrollHeight只给你一个数值，你必须附加px在这种情况下的单位。

function expandContract(id) {
    var object = document.getElementById(id);
    if (object.style.height != "0px") {
        object.style.height = "0px";
    } else {
        object.style.height = object.scrollHeight+"px";  
    }
}

jsFiddle

Answer 2

我让它在 Chrome 中正常工作。IE 当我将“溢出”更改为“滚动”时。