使用GetElementsByClassName JavaScript添加类

Question

我正在将一个jQuery网站转换为vanilla javascript，并且正在寻求关于将简单的jQuery行转换为javascript的最佳方法的建议。

jQuery $(".div_class").css({ display: 'none' });

任何建议在仅使用类的纯JavaScript中执行此操作 非常有帮助。

由于

Answer 1

尝试使用document.getElementsByName获取所需的元素

[].slice.bind(document.getElementsByClassName("div_class"))().forEach(function(itm){
  itm.style.display = "none";
});

通过将像对象一样的数组绑定为this slice并将其调用，将其转换为数组。现在迭代返回的数组并设置其显示属性。

您也可以直接使用forEach来缩短它，

[].forEach.bind(document.getElementsByClassName("div_class"),function(itm){
  itm.style.display = "none";
})();

Answer 2

选择具有该班级名称的所有元素：

var allEls = document.getElementsByClassName('div_class');

这会返回一个数组，因此您必须遍历每个元素并将每个display更改为none，如下所示：

for(var i=0; i < allEls.length; i++){
   allElls[i].style.display = 'none'
}

Answer 3

尝试这些行：

var div_class = document.getElementsByClassName('div_class');
for (var div in div_class) {
    div.style.display = 'none';
}

我认为您的困惑是因为document.getElementsByClassName('div_class')会返回一个Array ...而且因为我使用了for..in - 循环来迭代每个匹配上一个数组。

希望它有所帮助。