logo标签列表

使用纯JavaScript隐藏所有带有class的元素

javascript
46

我通常使用 document.getElementById('id').style.display = 'none' 通过Javascript来隐藏单个div。是否有类似简单的方法可以隐藏所有属于相同类别的元素?

我需要一个纯Javascript的解决方案，不使用jQuery。

显然SO希望我编辑这个问题以澄清它不是关于修改字符串的问题。但它并不是。

这个回答解决了你的问题吗？如何在JavaScript中替换所有字符串出现的位置。 - TheWebs
3
@TheWebs 十年前我问过这个问题，但是我刚刚为你检查了一下，答案是否定的。这个问题与字符串操作完全无关。 - MrGlass
11个回答
54
如果没有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问题：如何通过class id隐藏div元素，然而考虑到你要求“老派”的JS解决方案，我认为getElementsByClassName只被现代浏览器支持。

感谢对一个旧问题的新回答！使用内置方法确实更好。 - MrGlass
幸运的是，随着IE正式死亡，这个程序现在应该可以在任何浏览器上运行。对于仍在寻找此类修复程序的人，如果您需要包含“文档准备”函数，请将上面的代码插入到以下代码中：docReady(function() { // 在此处插入上述代码 });并从此处包含docReady函数：https://dev59.com/PWkw5IYBdhLWcg3wbqAS - brianlmerritt
34

在javascript中，隐藏所有具有特定类的元素有许多方法，其中一种方式是使用for循环，但我想向您展示其他做法。

1. forEach和querySelectorAll（'.classname'）

document.querySelectorAll('.classname').forEach(function(el) {
   el.style.display = 'none';
});

2.使用 getElementsByClassName 配合 for...of

for (let element of document.getElementsByClassName("classname")){
   element.style.display="none";
}

3.Array.prototype.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）中工作。

21

虽然晚了点，但我发现这是最简单的解决方案（如果你不使用jQuery）：

var myClasses = document.querySelectorAll('.my-class'),
    i = 0,
    l = myClasses.length;

for (i; i < l; i++) {
    myClasses[i].style.display = 'none';
}

演示

你的代码有一个小错误：在前两行代码的结尾应该加上";"而不是","。修复后，代码将完美运行。 - jnhghy - Alexandru Jantea
不是 bug，@alexalex。我使用逗号分隔的方式来声明变量。可以查看 https://dev59.com/Mmgu5IYBdhLWcg3wy558 获取更多信息。 - HoffZ
4
谢谢你指出这个问题并对我最初没有经过验证的评论感到抱歉，我只是想帮忙，没有别的意思 :) - 结果我学到了新东西 :) - jnhghy - Alexandru Jantea
11
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";
}
1
如果存在的话，通过测试并使用内置的document.getElementsByClassName()方法可以改进此内容。 - Tim Down
我在Chrome和IE中遇到了问题。Chrome控制台显示错误：“无法设置未定义的属性'display'”。 - MrGlass
10

我建议采用另一种方法。不要手动更改所有对象的属性，而是向文档添加新的CSS：

/* License: CC0 */
var newStylesheet = document.createElement('style');
newStylesheet.textContent = '.classname { display: none; }';
document.head.appendChild(newStylesheet);
1
我正在寻找这个答案以便点赞！ - Gust van de Wal
4
像下面这样简单：
let elements = document.querySelectorAll('.custom-class')

elements.forEach((item: any) => {
  item.style.display = 'none'
})

通过这样做，您可以避免所有的循环、索引等操作。

2

在现代JavaScript中，这个一行代码就可以搞定：

document.querySelectorAll('.my-class').forEach(el => el.hidden = true);
0

使用纯HTML\5，使用HTML安全属性名称和值。使用纯JavaScript传统访问、目标和操作感兴趣的cssRule。

p.s.： 没有递归迭代，没有对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>

这很聪明，但我更愿意保留当前的答案，因为我认为它在2021年有更广泛的用途。不过我可能会在其他地方使用这个技巧 :) - MrGlass
1
你错了，@MrGlass。 没有比上面更快、更通用、更2021++的解决方案了。 此外，在某些任务的传统代码方法和解决方案中，没有什么比它更普遍和强大的了。 谢谢阅读。我这里已经是早上了，我不小心发布了一篇未完成和未编辑的回复。 - Bekim Bacaj
0

jQuery的解决方案非常简单：

$(".className").hide();
2
OP 要求使用纯 JavaScript。 - Devsi Odedra
0

我非常喜欢@Haritsinh Gohil上面的答案，这启发了我写下这个答案，可以使用hidden属性切换项目的可见性。

  function toggle() {
      document.querySelectorAll('div.sad').forEach(function(elem) {
          elem.hidden = !elem.hidden;
      });
  }
<button onclick="toggle()">I'm a button, click me to hide the saddies</button>

<div id="parent">
  <div class="happy">
    :)
  </div>
  <div class="sad">
    :(
  </div>
  <div class="sad">
    :'(
  </div>
  <div class="angry">
    >:(
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接