getElementsByClassName não funciona

[suelystonn 3]

Olá pessoal,

 

Pesquisando, pesquisando descobri uma forma de que atende as minhas necessidades, porem ela não funciona.

 

Olhem o código

<a href="#" onClick="return oculta();">Ocultar</a><br>
<div class="tester">Isso ficará oculto</div>

<script type="text/javascript">
function oculta() {
	document.getElementsByClassName('tester').style.display='none';
}
</script>

Notem que eu quero ocultar um elemento com base na class dele, porem não funciona de jeito nenhum.

 

Alguém pode me ajudar?

[Ted k' 126]

A fonte que você encontrou está faltando um detalhe...

 

 

Simples assim:

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

[suelystonn 3]

Muito obrigado mesmo, era só esse pequeno detalhe rsrsrsr

Ted,

 

Percebi que dessa forma ele só vai pegar o primeiro elemento, como faço se eu tiver mais de 1, e que ao clicar em qualquer um seja executado a mesma coisa?????

[Anderson Danilo 43]

Nesse caso você teria que usar um for, exemplo:

 

var els = document.getElementsByClassName('tester');
for(var i = 0; i < els.length; i++) {
    els[i].style.display='none';
}

[dnielrodrigues 1]

Se os amigos permitirem eu ainda indicaria um a mais:

 

Em vez de usar style.display pra manipular o css via js. Seria legal mudar a classe do elemento e dar liberdade ao estilo, além de não obstruir a organização das camadas de conteúdo, comportamento e estilo.

 

Exemplo:

 

var #elementos = document.getElementsByClassName('tester');
for(#elemento in #elementos){

#elemento.className = "nova-classe";

}

 

//ou

//#elemento.className += "nova-classe";

//pra adicionar a classe

 

 

E inclusive dá pra usar transition do CSS3 pra deixar mais bonitinho visualmente.

 

Espero ter sido útil,

[suelystonn 3]

Muito obrigado anderson, era exatamente isso que eu estava procurando :clap:

 

e dniel,

 

Como assim? Você ta falando pra mudar todas as clases dos objetos para uma nova, e nesta nova já estar definido que no próprio css para ficar oculto?