Como getElementByClass em vez de GetElementById com JavaScript?

Estou tentando alternar a visibilidade de certos elementos DIV em um site, dependendo da class de cada DIV. Estou usando um snippet de JavaScript básico para alterná-los. O problema é que o script usa apenas getElementById , já que getElementByClass não é suportado em JavaScript. E infelizmente eu tenho que usar class e não id para nomear os DIVs porque os nomes DIV são gerados dinamicamente pela minha folha de estilo XSLT usando certos nomes de categoria.

Eu sei que certos navegadores agora suportam getElementByClass , mas como o Internet Explorer não, eu não quero seguir esse caminho.

Eu encontrei scripts usando funções para obter elementos por class (como # 8 nesta página: http://www.dustindiaz.com/top-ten-javascript/ ), mas não consigo descobrir como integrá-los com o meu script de alternância.

Aqui está o código HTML. Os próprios DIVs estão ausentes, pois são gerados no carregamento da página com XML / XSLT.

Pergunta principal: Como obtenho o script abaixo de Toggle para obter Element por Class em vez de obter Element por ID?

         Click here to toggle visibility of class 1 objects Click here to toggle visibility of class 2 objects   

Navegadores modernos têm suporte para document.getElementsByClassName . Você pode ver a análise completa de quais fornecedores fornecem essa funcionalidade no caniuse . Se você deseja estender o suporte para navegadores mais antigos, considere um mecanismo de seletor como o encontrado em jQuery ou um polyfill.

Resposta mais antiga

Você vai querer verificar em jQuery , o que permitirá o seguinte:

 $(".classname").hide(); // hides everything with class 'classname' 

O Google oferece um arquivo de origem jQuery hospedado, para que você possa consultá-lo e colocá-lo em operação em instantes. Inclua o seguinte em sua página:

   

O método getElementsByClassName agora é suportado nativamente pelas versões mais recentes do Firefox, Safari, Chrome, IE e Opera, você poderia fazer uma function para verificar se uma implementação nativa está disponível, caso contrário use o método Dustin Diaz:

 function getElementsByClassName(node,classname) { if (node.getElementsByClassName) { // use native implementation if available return node.getElementsByClassName(classname); } else { return (function getElementsByClass(searchClass,node) { if ( node == null ) node = document; var classElements = [], els = node.getElementsByTagName("*"), elsLen = els.length, pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j; for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; })(classname, node); } } 

Uso:

 function toggle_visibility(className) { var elements = getElementsByClassName(document, className), n = elements.length; for (var i = 0; i < n; i++) { var e = elements[i]; if(e.style.display == 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } } } 
 document.getElementsByClassName('CLASSNAME')[0].style.display = 'none'; 

Acualmente, usando getElementsByClassName, ele retorna uma matriz de várias classs. Porque o mesmo nome de class pode ser usado em mais de uma instância dentro da mesma página HTML. Usamos o id do elemento array para direcionar a class que precisamos, no meu caso, é a primeira instância do nome da class dada. Então eu usei [0]

adicionando à resposta do CMS , esta é uma abordagem mais genérica de toggle_visibility que acabei de usar:

 function toggle_visibility(className,display) { var elements = getElementsByClassName(document, className), n = elements.length; for (var i = 0; i < n; i++) { var e = elements[i]; if(display.length > 0) { e.style.display = display; } else { if(e.style.display == 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } } } } 

Minha solução:

Primeiro, crie tags “

  

Então, eu crio uma function em JavaScript assim:

 document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}' 

Caiu como uma luva para mim.

Use-o para acessar a class em Javascript.