Ocultar todos los elementos con clase usando Javascript simple

Question

Normalmente uso document.getElementById('id').style.display = 'none' para ocultar un solo div a través de Javascript. ¿Existe una forma similarmente simple de ocultar todos los elementos que pertenecen a la misma clase?

Necesito una solución simple de Javascript que no utiliza jQuery.

Answer 1

En ausencia de jQuery, me gustaría utilizar algo como esto:

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

Esto está tomado de esta cuestión de forma: Hide div by class id, sin embargo al ver que se Estoy pidiendo una solución JS de "la vieja escuela", creo que getElementsByClassName solo es compatible con los navegadores modernos

Answer 2

utilizar una versión modificada de este:

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

y jQuery va a hacer esto realmente fácil también.

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

sé el PO no quiere bibliotecas de alto nivel, pero, a menos que exista una necesidad real de limitar el tamaño y la computación, se sugiere emplear una, incluso si no va a ser utilizado en otras partes de la aplicación .

Por ejemplo, el uso de jQuery es muy simple:

$('.myClass').hide() 

Answer 5

Suponiendo que se trata de una sola clase por elemento:

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

y luego llamar a llamarlo simplemente con

swapCssClass('x_visible','x_hidden'); 

Answer 6

Última respuesta, pero descubrí que esta es la solución más simple (si no lo hace usar jQuery):

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

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

Demo