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

Answer 2

尝试

document.getElementsByClassName('box')[0].style.display="block";
                   ^                   ^

表示该类的第一个元素

检查document.getElementsByClassName

Answer 3

原则上这个脚本应该是这样的：

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

。
的修改：是的，IE8不支持getElementsByClassName。如果你想为那个浏览器编写代码，那么你应该使用它：

function show() {
    var boxes = document.querySelectorAll('.box');   // mind the dot
    for (var i=0; i<boxes.length; i++) {
        boxes[i].style.display = 'block';
    }
}

。
IE8支持getElementById，就像getElementsByTagName一样，供您参考。

Answer 4

您只需将getElementByClassName替换为getElementsByClassName。

Answer 5

getElementsByClassName

var classInstances = document.getElementsByClassName("box");
var n;
for (n = 0; n < classInstances.length; n++) {
   classInstances[n].style.display="block";
}

所以你忘了 s 如果你考虑一下，那就是纯粹的逻辑。

ID 是唯一标识号。相反，类 不唯一，可以有更多。所以你必须找到所有这些并迭代它们以获得正确的逻辑。

Javascript隐藏显示getElementById vs getElementsByClassName

5 个答案: