Javascript 隐藏显示 getElementById 与 getElementsByClassName

Question

我有一个非常简单的工作功能，可以通过单击链接显示一个 div:

function show() {
document.getElementById('box').style.display="block";
}

<a href="javascript:show();">Show</a>
<div id="box" style="display:none;">
Lorem Ipsum
</div>

但是现在，当我简单地将 div 从 id 更改为类并将 getElementById 替换为 getElementByClassName 时，它​​不再起作用了:

function show() {
document.getElementByClassName('box').style.display="block";
}

<a href="javascript:show();">Show</a>
<div class="box" style="display:none;">
Lorem Ipsum
</div>

我做错了什么？

Answer 1

试试这个:

function show() {
for(var i=0;i<document.getElementsByClassName('box').length;i++){
document.getElementsByClassName('box')[i].style.display="block";
}
}

PS : 注意 s 在 getElement s ByClassName