js控制隐藏显示问题

Question

代码如下：
function Shrink(){
    var area = "content1";//"TreeView1";//"content"
    if(document.getElementById(area).style.visibility == "hidden")
    {
        document.getElementById(area).style.visibility = "visible";  
        document.getElementById(area).style.height = 100;
    }
    else
    {
        document.getElementById(area).style.visibility = "hidden";
        document.getElementById(area).style.height = 1;
    }
}<table style="width: 264px; height: 84px">
            <tr>
                <td>
                <input id="Button2" type="button" value="button" onclick="Shrink()" />
                <div id = "content1" style="height:100">
                    aaa<br />
                    aaa<br />
                    aaa<br />
                    aaa<br />
                    
                </div>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="" /></td>
            </tr>
            <tr>
                <td>
                    <input id="Button1" type="button" value="button" /></td>
            </tr>
        </table>
此时已能实现隐藏显示功能，但是当“content1”div中的“aaa<br />
”越多，隐藏后显示的空白就越多，显示效果很差，请问有什么办法解决？先谢过各位大虾了。

Answer 1

用document.getElementById(area).style.dispaly == "none")就好了

Answer 2

写错了是document.getElementById(area).style.display == "none"
display是不占位子的,visibility虽然看不到,但占位子

Answer 3

function Shrink(){
var e = document.getElementById("content1");
if(e.style.display == "none")
{
e.style.display = "";
}
else
{
e.style.display = "none";
}
}

Answer 4

document.getElementById(area).style.display = "none";
可以

Answer 5

document.getElementById('c').style.display=document.getElementById('c').style.display=='none'?'':'none'