Nascondere tutti gli elementi con la classe utilizzando plain Javascript

Question

Io di solito uso document.getElementById('id').style.display = 'none' per nascondere un singolo div tramite Javascript. C'è un modo altrettanto semplice per nascondere tutti gli elementi appartenenti alla stessa classe?

Ho bisogno di una soluzione Javascript semplice che non usi jQuery.

Answer 1

In assenza di jQuery, vorrei usare qualcosa di simile:

<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> 

Questo è preso da questa domanda SO: Hide div by class id, però visto che si Stai chiedendo la soluzione JS "vecchia scuola", credo che getElementsByClassName sia supportato solo dai browser moderni

Answer 2

utilizzare una versione modificata di questo:

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

e jQuery farà davvero troppo facilmente.

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

So che il PO non vuole librerie di alto livello, ma, a meno che non v'è una reale necessità di limitare dimensioni e di calcolo, io suggerisco di usare uno, anche se non sarà utilizzato in altre parti dell'applicazione .

Ad esempio, utilizzando jQuery è molto semplice:

$('.myClass').hide() 

Answer 5

Supponendo che avete a che fare con una sola classe per ogni elemento:

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

e quindi chiamare semplicemente chiamare con

swapCssClass('x_visible','x_hidden'); 

Answer 6

Risposta tardiva, ma ho scoperto che questa è la soluzione più semplice (se non lo fai utilizzare jQuery):

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

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

Demo