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抛出一个未定义的＆＃34;类型错误。

如何收集所有具有相同类名的元素数组，然后在每个元素上执行相同的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"; }

Answer 2

您可以通过调用Array.prototype.slice

将HTMLCollection转换为数组

示例

var ArrayTest2 = document.getElementsByClassName('mydiv'); ArrayTest2 = Array.prototype.slice.call(ArrayTest2); ArrayTest2.forEach( function(element){ element.style.display = 'none'; });

<强>解释

调用Array#slice会将集合转换为数组，以便您访问Array#forEach

通过该访问，您可以遍历每个元素并轻松设置显示样式。

示例＃2

使用类似的方法，您只需调用Array.prototype.forEach并完全绕过切片部分。

Array.prototype.forEach.call(document.getElementsByClassName('mydiv'), function(element) { element.style.display = 'none'; });

Answer 3

let ArrayTest2 = [...document.getElementsByClassName('mydiv')];

您可以使用ES6扩展运算符将类似Array的对象转换为实际数组。它更清洁。（只需要使用Babel或其他编译器）。

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

3 个答案: