使用普通 Javascript 隐藏所有带有类的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4644673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide all elements with class using plain Javascript
提问by MrGlass
I normally use document.getElementById('id').style.display = 'none'to hide a single div via Javascript. Is there a similarly simple way to hide all elements belonging to the same class?
我通常用来document.getElementById('id').style.display = 'none'通过 Javascript 隐藏单个 div。有没有类似的简单方法来隐藏属于同一类的所有元素？
I need a plain Javascript solution that does not use jQuery.
我需要一个不使用 jQuery 的普通 Javascript 解决方案。
回答by Dairy Window
In the absence of jQuery, I would use something like this:
在没有 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>
This is taken from this SO question: Hide div by class id, however seeing that you're asking for "old-school" JS solution, I believe that getElementsByClassName is only supported by modern browsers
这是从这个 SO 问题中获取的：Hide div by class id，但是看到您要求“老派”JS 解决方案，我相信 getElementsByClassName 仅受现代浏览器支持
回答by HoffZ
回答by Жасулан Бердибеков
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";
}
回答by Haritsinh Gohil
There are many ways to hide all elements which has certain class in javascript one way is to using for loop but here i want to show you other ways to doing it.
有很多方法可以隐藏在 javascript 中具有特定类的所有元素，一种方法是使用 for 循环，但在这里我想向您展示其他方法。
1.forEach and querySelectorAll('.classname')
1. forEach 和querySelectorAll('.classname')
document.querySelectorAll('.classname').forEach(function(el) {
el.style.display = 'none';
});
2.for...of with getElementsByClassName
2. for...of withgetElementsByClassName
for (let element of document.getElementsByClassName("classname")){
element.style.display="none";
}
3.Array.protoype.forEach getElementsByClassName
3. Array.protoype.forEachgetElementsByClassName
Array.prototype.forEach.call(document.getElementsByClassName("classname"), function(el) {
// Do something amazing below
el.style.display = 'none';
});
4.[ ].forEach and getElementsByClassName
4. [ ].forEach 和getElementsByClassName
[].forEach.call(document.getElementsByClassName("classname"), function (el) {
el.style.display = 'none';
});
i have shown some of the possible ways, there are also more ways to do it, but from above list you can Pick whichever suits and easy for you.
我已经展示了一些可能的方法，还有更多的方法可以做到，但是从上面的列表中，您可以选择适合您且容易的方法。
Note:all above methods are supported in modern browsers but may be some of them will not work in old age browsers like internet explorer.
注意：上述所有方法在现代浏览器中都受支持，但其中一些方法可能不适用于 Internet Explorer 等老式浏览器。
回答by Mat2
I would propose a different approach. Instead of changing the properties of all objects manually, let's add a new CSS to the document:
我会提出一种不同的方法。不是手动更改所有对象的属性，让我们向文档添加一个新的 CSS：
/* License: CC0 */
var newStylesheet = document.createElement('style');
newStylesheet.textContent = '.classname { display: none; }';
document.head.appendChild(newStylesheet);
回答by whadar
Assuming you are dealing with a single class per element:
假设您正在处理每个元素的单个类：
function swapCssClass(a,b) {
while (document.querySelector('.' + a)) {
document.querySelector('.' + a).className = b;
}
}
and then call simply call it with
然后调用简单地调用它
swapCssClass('x_visible','x_hidden');
回答by Ben
I use a modified version of this:
我使用了这个的修改版本：
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;
};
And JQuery will do this really easily too.
而且 JQuery 也可以很容易地做到这一点。
回答by Don
I know the OP doesn't want high-level libraries but, unless there is a real need for limiting size and computation, I suggest using one, even if it won't be used elsewhere in the application.
我知道 OP 不需要高级库，但是，除非确实需要限制大小和计算，否则我建议使用一个，即使它不会在应用程序的其他地方使用。
For instance, using jQueryit is very simple:
例如，使用jQuery非常简单：
$('.myClass').hide()
