Question

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

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

Answer 1

如果没有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，但是看到你要求＆＃34;老派＆＃34; JS解决方案，我相信getElementsByClassName仅受现代浏览器的支持

Answer 2

迟到的答案，但我发现这是最简单的解决方案（如果你不使用jQuery）：

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

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

Demo

Answer 3

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";
}

Answer 4

假设您正在处理每个元素的单个类：

function swapCssClass(a,b) {
    while (document.querySelector('.' + a)) {
        document.querySelector('.' + a).className = b;
    }
}

然后调用只需用

调用它

swapCssClass('x_visible','x_hidden');

Answer 5

我使用的修改版本：

function getElementsByClass(nameOfClass) {    
  var temp, all, elements;

  all = document.getElementsByTagName("*");
  elements = [];

  for(var a=0;a<all.length;a++) {
    temp = all[a].className.split(" ");
    for(var b=0;b<temp.length;b++) {
      if(temp[b]==nameOfClass) { 
        elements.push(ALL[a]); 
        break; 
      }
    }
  }
  return elements;
};

JQuery也很容易做到这一点。

Answer 6

有很多方法可以在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 getElementsByClassName("classname")){
   element.style.display="none";
}

3. Array.protoype.forEach getElementsByClassName

Array.prototype.forEach.call(document.getElementsByClassName("classname"), function(el) {
    // Do something amazing below
    el.style.display = 'none';
});

4. [] .forEach和getElementsByClassName

[].forEach.call(document.getElementsByClassName("classname"), function (el) {
    el.style.display = 'none';
});

我已经展示了一些可能的方法，还有更多的方法可以使用，但是从上面的列表中，您可以选择适合您的任何适合的方法。

注意：以上所有方法在现代浏览器中均受支持，但其中某些方法可能无法在旧版浏览器（如Internet Explorer）中使用。

Answer 7

我会提出另一种方法。与其手动更改所有对象的属性，不如将新的CSS添加到文档中：

/* License: CC0 */
var newStylesheet = document.createElement('style');
newStylesheet.textContent = '.classname { display: none; }';
document.head.appendChild(newStylesheet);

Answer 8

简单如下：

let elements = document.querySelectorAll('.custom-class')

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

这样，您就避免了所有循环，索引等操作。

Answer 9

使用纯 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>

Answer 10

我知道OP不需要高级库，但除非确实需要限制大小和计算，否则我建议使用一个，即使它不会在应用程序的其他地方使用。

例如，使用jQuery非常简单：

$('.myClass').hide()

使用普通Javascript隐藏所有元素

10 个答案: