如何使用html标签更改div的宽度和高度？

Question

<div class="panel">
    <a href onclick="manipulate()">Show Quick Admin (↑)</a>
    <div class="hidden">
        <ul>
            <li>
                <a href="admin.php">Panel</a>
            </li>
        </ul>
    </div>
</div>

所以我想为我正在制作的网站制作一个“快速管理栏”。 这是我正在使用的代码，不要介意它是不好的事实。 我试图使它检查div“面板”的高度和宽度，如果它是20px，则更改“ a”标记的innerHTML，显示“ hidden” div，并使其成为如果单击“ a”再次标记，它将div的高度从300px设置回20px，再次更改标记的innerHTML，并隐藏“隐藏”的div，使其无法查看。 我该怎么办？

javascript：

function manipulate() {
    if ($("#panel").height() == "20") {
        document.getElementsByClassName("panel").style.height= "300px";
        document.getElementsByClassName("hidden").style = "";
    }
}

CSS：

.panel {
    padding:10px;
    background:#fffdbb;
    position:fixed;
    bottom:15px;
    width:225px; 
    height:20px; /* 300px */
    right:15px;
    border:10;
    border-style:solid;
    border-width:2px;
    border-color:red;
}

.hidden {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

现在，单击“显示快速管理”时它什么都不做。 我怎样才能解决这个问题？

Answer 1

您应该使用[0]

 document.getElementsByClassName("panel")[0].style.height= "300px"

如果使用jquery，为什么不使用它呢？

$(".panel").css("height","300px");

我建议您使用id代替class

<div class="panel">

与

<div id="panel">

正确的使用方式

http://jsfiddle.net/sb3fY/1/

    <div id="panel">
    <span class="link1">Show Quick Admin (↑)</span>
    <div class="hidden">
        <ul>
            <li>
               <a href="admin.php">Panel</a>
            </li>
        </ul>
    </div>
</div>

Java脚本

$(".link1").on("click",function(){
  $("#panel").toggleClass("open");
  $("#hidden").toggle();
});

的CSS

    #panel {
    padding:10px;
    background:#fffdbb;
    position:fixed;
    bottom:15px;
    width:225px; 
    height:20px; /* 300px */
    right:15px;
    border:10;
    border-style:solid;
    border-width:2px;
    border-color:red;
}

.hidden {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#panel.open {
 height: 300px;
}