3 exemplos de manipulação de TAGs ou seus IDs do HTML usando JS. Nos exemplos irei trocar as cores dos elementos.
no primeiro exemplo, utilizei o evento onClick (que vai fazer alguma coisa quando for clicado) para trocar a cor de fundo de um elemento do html que eu chamei pelo seu id. Vamos ao código:
<div id="doc" class="yui-t2">
<div<b> id="hd"</b>>
<p>Header</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<p>Main - exemplo de javascript pegando um elemento do documento e trocando a propriedade</p>
</div>
</div>
<div class="yui-b">
<ul>
<li><a href="#this" <b>onClick="document.getElementById('hd').style.background='blue';"</b>>trocar cor do head - cor azul</a></li>
<li><a href="#this" onClick="document.getElementById('hd').style.background='yellow';">trocar cor do head - cor amarelo</a></li>
<li><a href="#this" onClick="document.getElementById('hd').style.background='red';">trocar cor do head - cor vermelho</a></li>
</ul>
</div>
</div>
<div id="ft">
<p>Footer</p>
</div>
</div>
no onClick, quando eu clicar ele vai no documento (objeto), pegar o elemento pela sua ID (no caso o hd) e colocar uma cor de fundo azul.
no segundo exemplo, vou seguir a mesma linha de racioncínio, vou usar o onClick pra fazer alguma coisa quando eu clicar, só que agora eu vou passar alguns parâmetros que eu quero que ele altere. Vamos ao código:
entre a tag <head> eu crio uma função:
<script type="text/javascript">
var setColorTag = function( tag , color )
{
var getTags = document.getElementsByTagName( tag );
var setColor = color;
for ( i = 0; i < getTags.length; i++ )
{
getTags[i].style.backgroundColor = setColor;
}
}
</script>
nessa funcao setColorTags eu estou passando dois parâmetros que ela vai receber pra poder fazer algo, nesse exemplo ele vai pegar uma tag e vai trocar a cor de fundo dela.
agora entre a tag <body> eu tenho o seguinte codigo:
<<b>div</b> id="doc" class="yui-t2">
<<b>div</b> id="hd">
<p>Header</p>
<ul>
<li><a href="#this" <b>onClick="setColorTag('div','blue');"</b>>trocar cor das divs - cor azul</a></li>
<li><a href="#this" onClick="setColorTag('div','yellow')">trocar cor das divs - cor amarelo</a></li>
<li><a href="#this" onClick="setColorTag('div','red')">trocar cor das divs - cor vermelho</a></li>
</ul>
</div>
<<b>div</b> id="bd">
<<b>div</b> id="yui-main">
<<b>div</b> class="yui-b">
<p>Main - exemplo de javascript pegando qualquer elemento do documento pela sua tag e trocando a propriedade</p>
</div>
</div>
<<b>div</b> class="yui-b">
<p>other block</p>
</div>
</div>
<<b>div</b> id="ft">
<p>Footer</p>
</div>
</div>
explicando… no onClick eu vou chamar a função que eu criei pra setar uma cor pra alguma tag, e passo como parâmetro a tag DIV e uma cor. Lá na função tem um for, que vai procurar todos os divs e colocar uma cor de fundo neles.
e pra finalizar, no exemplo 3 eu quero que fique trocando de cor sozinho, em um intervalo de tempo, um elemento que eu vou determinar pela sua ID. Vamos ao código:
<script type="text/javascript">
<b> window.onload = randomColorTagId;</b>
function randomColorTagId()
{
var cor = new Array();
cor[0] = 'blue';
cor[1] = 'yellow';
cor[2] = 'red';
var i = Math.random()*(cor.length-1);
i = Math.round(i);
document.getElementById( 'doc' ).style.backgroundColor = cor[i];
<b>setTimeout( "randomColorTagId()" , 1000 );</b>
}
</script>
na primeira linha eu falo pro objeto windows: janela você vai carregar a funcao randomColorTagId. Meu evento agora é onload. Então, quando for carregado a pagina ele vai executar a função, que cria um array com as cores que eu quero que ele fique alternando e determino um intervalo de tempo pra ele trocar, usando o setTimeout.
Espero ter ajudado…
Artigo muito bom – Objetivo, direto…
Comentário por Antonio Almeida — Setembro 20, 2008 @ 8:48 pm |