Como getElementByClass em vez de GetElementById com JavaScript?

91

Estou tentando alternar a visibilidade de certos elementos DIV em um site, dependendo da classe de cada DIV. Estou usando um snippet de JavaScript básico para alterná-los. O problema é que o script só usa getElementById, pois getElementByClassnão é compatível com JavaScript. E, infelizmente, tenho que usar class e não id para nomear os DIVs porque os nomes dos DIVs são gerados dinamicamente por minha folha de estilo XSLT usando certos nomes de categorias.

Eu sei que alguns navegadores agora oferecem suporte getElementByClass, mas como o Internet Explorer não, não quero seguir esse caminho.

Encontrei scripts usando funções para obter elementos por classe (como o nº 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 faço para obter o script de alternância abaixo para obter Elemento por classe em vez de obter Elemento por ID?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>
javascript class toggle getelementbyid getelementsbyclassname Alan
fonte
3
Por que não tenho usado jQuery o tempo todo? Aceitei a sugestão de @Jonathan Sampson de usar jQuery e funciona! (A resposta do CMS foi a que pensei estar procurando, mas não consegui fazer funcionar) Dei um id a cada link e com jQuery posso definir quais classes são mostradas e quais são ocultadas quando você clica em um link específico. ÓTIMO! Esta solução parece boa demais para ser verdade. jQuery parece bom demais para ser verdade. Quais são as desvantagens de usar jQuery? Como um novato, por que eu usaria Javascript em vez de jQuery?
Alan

Respostas:

77

Os navegadores modernos têm suporte para document.getElementsByClassName. Você pode ver a análise completa de quais fornecedores oferecem essa funcionalidade em caniuse . Se você deseja estender o suporte a navegadores mais antigos, pode considerar um mecanismo de seleção como o encontrado em jQuery ou polyfill.

Resposta mais antiga

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

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

O Google oferece um arquivo-fonte jQuery hospedado, para que você possa consultá-lo e estar em funcionamento em instantes. Inclua o seguinte em sua página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>
Sampson
fonte
1
Embora seja bom, o jQuery hospedado pelo Google é útil apenas para as coisas mais simples, devido à segurança de script entre sites implementada pela maioria dos navegadores modernos.
Paulo Santos
2
Você também pode baixar o arquivo de origem em jQuery.com e consultá-lo localmente.
Sampson
21
@Paulo: Cross-site scripting não se aplica a <script>tags. O jQuery hospedado pelo Google é projetado especificamente para sites de produção (como um CDN). Se o seu site for https, certifique-se de usar a versão https para evitar o aviso de conteúdo misto.
Chetan S
3
Na verdade, a <script>injeção de tag é a base das solicitações JSONP entre sites.
Chetan S
2
Paulo, você percebe que uma vez que você inclui jQuery com a tag <script>, não há nenhuma restrição entre sites?
Dark Falcon
88

O getElementsByClassNamemétodo agora é nativamente suportado pelas versões mais recentes do Firefox, Safari, Chrome, IE e Opera, você pode fazer uma função 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';
     }
  }
}
CMS
fonte
2
Por que você usa essa função interna em vez de apenas código simples?
Tomáš Zato - Reintegrar Monica em
-1 por exemplo, uso assumindo que todos os elementos na tela têm exibição em bloco. Em toggle_visibility, se e for um <span> então ele deve ser 'inline' e não 'block'. Uma solução muito mais robusta é definir uma classe CSS: .invisible {display: none! Important} e usar JavaScript (ou jQuery) para atribuir e remover a atribuição dessa classe de elementos
John Meyer
6 
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Realmente, usando getElementsByClassName, ele retorna uma matriz de várias classes. Porque o mesmo nome de classe pode ser usado em mais de uma instância dentro da mesma página HTML. Usamos o id do elemento da matriz para direcionar a classe de que precisamos, no meu caso, é a primeira instância do nome de classe fornecido. Portanto, usei [0]

Vishwa
fonte
3

Use-o para acessar a classe em Javascript.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>
Manvendra Priyadarshi
fonte
2

acrescentando à resposta do CMS , esta é uma abordagem mais genérica toggle_visibilityque 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';
       }
     }
  }
}
cregox
fonte
1

Minha solução:

Primeiro crie tags "<style>" com um ID.

<style id="YourID">
    .YourClass {background-color:red}
</style>

Então, crio uma função em JavaScript como esta:

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

Caiu como uma luva para mim.

tilório
fonte
1
As quebras de linha ( <br>) são inúteis / inválidas em uma tag de estilo
Chris Forrence,
-1

Anexar IDs na declaração da classe

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
Reltpid
fonte