使用 GetElementsByClassName JavaScript 添加类答案

【问题标题】：Add Class using GetElementsByClassName JavaScript使用 GetElementsByClassName JavaScript 添加类
【发布时间】：2016-03-18 22:41:28
【问题描述】：

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

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

在纯 javascript 中仅使用类的任何建议都会很有帮助。

谢谢

【问题讨论】：

【解决方案1】：

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

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

并通过将类似数组的对象绑定为slice 的this 值并将其转换为数组并调用它。现在遍历返回的数组并设置它的显示属性。

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

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

【讨论】：

你我的朋友，是忍者。
@newneub :) 很高兴为您提供帮助！ :)
您可以像这样进一步简化它，删除slice() 步骤： [].forEach.call(document.getElementsByClassName('div_class'), function (el) { el.style.display = '无'; });
.bind 甚至没有必要，因为.call 的第一个参数设置了调用[].forEach 的上下文。 .call 进一步省去了最后必须执行绑定的forEach 函数的步骤：.call 都设置了上下文和一步执行函数。 :)
@jpec 每个人都在以这种方式写作。只是为了改变我以这种方式编写的.. :) 我阅读了算法，当我们使用绑定时不会有任何性能缺陷。 :)

【解决方案2】：

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

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

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

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

【讨论】：

嘿抱歉它没有返回一个数组，它返回一个类似数组的对象，getElementsByClassName 返回一个找到元素的 HTML 集合：developer.mozilla.org/en-US/docs/Web/API/Document/…

【解决方案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-循环来迭代前一个数组的每个匹配项。

希望对你有帮助。

【讨论】：