使用javascript和GetElementsByCassName检索显示属性

我正在尝试创建一个可扩展的div。我想检索CSS display属性并使用纯javascript更改它。执行此操作时，我收到一个错误，称为UncaughtTypeError:未能在“窗口”上执行“getComputedStyle”：参数1不是“元素”类型

var myFunction=函数{ var header=document.getElementsByClassName'collapse_header'； var hiddenDiv=document.getElementsByClassName'collapse_body'； var theCSSprop=window.getComputedStylehiddenDiv.getPropertyValue'display'； 对于变量i=0；i我有一个你想要实现的工作例子。 如果不使用库，以跨浏览器的方式获取计算属性会有点麻烦。因此，我认为最好在javascript中设置display:none

这是我的密码

for (var i = document.getElementsByClassName('collapse_body').length - 1; i >= 0; i--) {
    document.getElementsByClassName('collapse_body')[i].style.display = "none";
};
var l = document.getElementsByClassName('collapse_header');
var toggle = function()
{
    cb = this.parentNode.getElementsByClassName('collapse_body')[0];
    cb.style.display = ((cb.style.display == "none") ? "block" : "none");

}
for (var i = l.length - 1; i >= 0; i--) {
    l[i].addEventListener('click', toggle, false);
};

基本上，您可以将所有collapse\u body元素的显示属性设置为none，然后将一个事件附加到每个collapse\u头，该事件将切换其兄弟collapse\u body的显示属性

---

另外请注意，getElementsByClassName返回一个元素数组，您可以像使用普通数组一样映射或选择元素。

getElementsByClassName返回一个数组，因此hiddenDiv是任何元素数组getElementsByClassName akways返回一个列表。请尝试var hiddenDiv=document.getElementsByClassName'collapse_body'[0]，但如果找不到元素，则会引发此错误。如果你认为有机会，在尝试获取css之前检查结果。我尝试了，但它不起作用。当我单击带有类collapse_标题的a div时，我希望与该div关联的主体部分折叠，而不是一次折叠。另外，我有一个事件处理程序附加到每个头。标题[i]。addEventListener'click'，myFunction，false；谢谢，它工作得很好。唯一让我困惑的是这一行：对于var i=l.length-1；i>=0；i-。为什么要向下递增？在这种情况下，这并不是必须的，但有时在操作dom时，它可以防止一些bug。