我通常使用document.getElementById('id').style.display = 'none' 通过 Javascript 隐藏单个 div。有没有类似的简单方法来隐藏属于同一类的所有元素？
我需要一个不使用 jQuery 的纯 Javascript 解决方案。
显然 SO 希望我对此进行编辑以澄清这不是关于修改字符串的问题。不是。
【问题讨论】：
标签： javascript
有很多方法可以隐藏在 javascript 中具有特定类的所有元素，一种方法是使用 for 循环，但在这里我想向您展示其他方法。
1.forEach 和querySelectorAll('.classname')
document.querySelectorAll('.classname').forEach(function(el) {
el.style.display = 'none';
});
2.for...of with getElementsByClassName
for (let element of document.getElementsByClassName("classname")){
element.style.display="none";
}
3.Array.protoype.forEach getElementsByClassName
Array.prototype.forEach.call(document.getElementsByClassName("classname"), function(el) {
el.style.display = 'none';
});
4.[ ].forEach 和getElementsByClassName
[].forEach.call(document.getElementsByClassName("classname"), function (el) {
el.style.display = 'none';
});
我已经展示了一些可能的方法，还有更多的方法可以做到，但从上面的列表中你可以选择适合你的和容易的。
注意：现代浏览器都支持上述所有方法，但可能其中一些方法不适用于 Internet Explorer 等旧版浏览器。
【讨论】：
使用纯 HTML\5 使用 HTML 安全属性名称\值。对感兴趣的 cssRule 的纯 JavaScript 常规访问、目标和操作。
附言： 没有递归迭代没有对 DOM 的递归调用，也没有元素迭代和值分配。使其成为可能的最快解决方案，其中唯一的瓶颈是机器相关的渲染和刷新能力。
onclick = function( ) {
with( document.styleSheets.style1.cssRules[0] )
style.display = style.display ? "" : "none";
}.showHide{
color: #777;
}<!DOCTYPE html>
<html>
<head>
<style id=style1>
.showHide{
}
</style>
</head>
<body>
<div class=showHide>hide this element</div>
<div class=showHide>hide this element</div>
<div class=showHide>hide this element</div>
<div class=dontHide>this element will not hide</div>
<div class=showHide>hide this element</div>
</body>
</html>【讨论】：
就这么简单：
let elements = document.querySelectorAll('.custom-class')
elements.forEach((item: any) => {
item.style.display = 'none'
})
这样，您就可以避免所有循环、索引等。
【讨论】：
我会提出一种不同的方法。与其手动更改所有对象的属性，不如在文档中添加一个新的 CSS：
/* License: CC0 */
var newStylesheet = document.createElement('style');
newStylesheet.textContent = '.classname { display: none; }';
document.head.appendChild(newStylesheet);
【讨论】：
在没有 jQuery 的情况下，我会使用这样的东西：
<script>
var divsToHide = document.getElementsByClassName("classname"); //divsToHide is an array
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.visibility = "hidden"; // or
divsToHide[i].style.display = "none"; // depending on what you're doing
}
<script>
这取自这个 SO 问题：Hide div by class id，但是看到您要求“老式”JS 解决方案，我相信 getElementsByClassName 仅受现代浏览器支持
【讨论】：
docReady(function() { // Insert the above code here }); 并从此处包含 docReady 函数stackoverflow.com/questions/9899372/…
迟到的答案，但我发现这是最简单的解决方案（如果你不使用 jQuery）：
var myClasses = document.querySelectorAll('.my-class'),
i = 0,
l = myClasses.length;
for (i; i < l; i++) {
myClasses[i].style.display = 'none';
}
【讨论】：
假设您正在处理每个元素的单个类：
function swapCssClass(a,b) {
while (document.querySelector('.' + a)) {
document.querySelector('.' + a).className = b;
}
}
然后调用只需调用它
swapCssClass('x_visible','x_hidden');
【讨论】：
document.getElementsByClassName 而不是拼凑选择器
function getElementsByClassName(classname, node) {
if(!node) node = document.getElementsByTagName("body")[0];
var a = [];
var re = new RegExp('\\b' + classname + '\\b');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var elements = new Array();
elements = getElementsByClassName('yourClassName');
for(i in elements ){
elements[i].style.display = "none";
}
【讨论】：
document.getElementsByClassName() 方法来改进。