收集div并对它们执行CSS:HTMLCollection vs Array

Question

想知道我如何才能正常工作:

var ArrayTest = [1,2,3,4,"test"];
var ArrayTest2 = document.getElementsByClassName('mydiv');
ArrayTest2.forEach( function(){
    this.style.display = 'none'; 
});

所以ArrayTest作为一个回来Array,但是ArrayTest2作为一个回来HTMLCollection并forEach抛出一个"未定义"的类型错误.

如何收集所有具有相同类名的元素数组,然后在每个元素上执行相同的CSS？

Answer 1

我会通过添加一个CSS类来做一个稍微不同的方式,并且可能通过使用jQuery来让你的生活更轻松:

$(".mydiv").addClass("no-display");

然后在你的CSS中

.no-display {
    display: none;
}

如果要分配特定的内联属性,则可以使用:

$(".mydiv").css("display", "none");

编辑

好吧,对于纯JavaScript方法

for (var i = 0; i < ArrayTest2.length; i++) {
   ArrayTest2[i].style.display = "none"; 
}