Como getElementbyclass em vez de getElementbyId com javascript?

StackOverflow https://stackoverflow.com/questions/1933602

Pergunta

Estou tentando alternar a visibilidade de certos elementos de div em um site, dependendo da classe de cada div. Estou usando um trecho javascript básico para alterná -los. O problema é que o script apenas usa getElementById, Como getElementByClass não é suportado em JavaScript. E, infelizmente, tenho que usar a classe e não o ID para nomear os divs porque os nomes de div são gerados dinamicamente pela minha folha de estilo XSLT usando determinados nomes de categoria.

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

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

Aqui está o código HTML. Os próprios divs estão ausentes, pois são gerados na página de página com XML/XSLT.

Pergunta principal: como faço para obter o script abaixo alternar 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>
Foi útil?

Solução

Navegadores modernos têm apoio para document.getElementsByClassName. Você pode ver o colapso completo de quais fornecedores fornecem essa funcionalidade em eu posso usar. Se você deseja estender o suporte para navegadores mais antigos, considere um mecanismo seletor como o encontrado no jQuery ou um poli -preenchimento.

Resposta mais antiga

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

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

O Google oferece um arquivo de origem do JQuery hospedado, para que você possa fazer referência a ele e estar em andamento em momentos. 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>

Outras dicas

o getElementsByClassName O método agora é apoiado nativamente 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';
     }
  }
}

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

ACEIDADE usando o GetElementsByClassName, ele retorna uma matriz de várias classes. Como o mesmo nome de classe pode ser usado em mais de uma instância na mesma página HTML. Usamos o ID do elemento da matriz para atingir a classe de que precisamos, no meu caso, é a primeira instância do nome da classe dado. Então eu usei [0

adicionando a Resposta do CMS, esta é uma abordagem mais genérica de toggle_visibility Acabei de me 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 " u003Cstyle>" tags with an ID.

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

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

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

Caiu como uma luva para mim.

Use -o para acessar a classe no JavaScript.

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

Anexar IDs na declaração de classe

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top