JavaScript getElementsByClassName错误

Question

我正在尝试制作菜单，但是当我尝试在Chrome中执行代码时，我遇到了错误。

因此，对于调试建议我做了一个按钮：

<input type="button" style="position: fixed; left:0; bottom:0; width:50px; height:25px;" value="test" onclick="login('logf')" />

这是错误的函数：

var loginshow = false;


function login(c)
{
    e = document.getElementsByClassName(c);
    if(loginshow)
    {
        e.style.height = "0";
    }
    else
    {
        e.style.height = "110px";
    }
    loginshow=!loginshow;

}

谷歌浏览器的错误：

bar.js:13 Uncaught TypeError: Cannot set property 'height' of undefined
    at login (bar.js:13)
    at HTMLInputElement.onclick ((index):32)

Answer 1

getElementsByClassName返回具有所有给定类名的所有子元素的类数组对象。您需要迭代所有元素并在每个元素上应用样式

＆＃13;

＆＃13;

var loginshow = false;


function login(c) {
  let elements = document.getElementsByClassName(c);
  for(let i=0,l=elements.length;i<l;i++){
    elements[i].style.height = loginshow ? "0" : "110px";
  }
  loginshow = !loginshow;

}

＆＃13;

div {
  background-color: tomato;
  border: 1px solid black;
}

＆＃13;

<input type="button" style="position: fixed; left:0; bottom:0; width:50px; height:25px;" value="test" onclick="login('logf')" />

<div class="logf"></div>
<div class="logf"></div>

＆＃13;

＆＃13;

＆＃13;