domingo, 28 de outubro de 2007

Javascript > Manipular Tags

Eae galera, esse post aqui é referente a o principio do principio do principio, de como manipular objetos HTML e suas classes, para isso vou utilizar o getElementById!

Antes de mais nada, gostaria de reforçar aki a importancia de c trabalhar em 3 camadas, uma contendo um arquivo ".css" a segunda contendo um arquivo ".js" e por ultimo uma com um arquivo ".html", esta técnica é muito poderosa e traz um ganho muito grande de produtividade, que voltarei a falar aqui no blog ainda! agora vou voltar ao "getElementById", são 3 passos, o primeiro o html que vou criar, simples, nele possuo um link que chama uma função javascript chamada exibe():
_________________________________________
<div id="conteudo1">

<h1><a href="teste.html" onclick="return exibe('paragrafo')">Titulo 1</a></h1>
<p id="paragrafo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi dictum, justo nec ultricies aliquet, tellus neque dignissim elit, ut euismod justo libero a ante. Aenean dictum nunc eu urna. Donec risus Quisque ultricies dapibus est. Curabitur rhoncus, metus at viverra consequat, lacus est vestibulum orci, eu molestie massa dolor eu libero. Aliquam consequat volutpat ligula.
</p>
</div>
_________________________________________



Agora vamos ao javascript a função exibir que deve estar num arquivo ".js"
_________________________________________
function exibe(obj) {
idTag = document.getElementById(obj);
if (idTag.style.display == 'block') {
idTag.style.display= 'none';
} else {
idTag.style.display= 'block';
}
return false;
}
_________________________________________


e por ultimo o arquivo ".css" que apenas oculta o paragrafo que é exibido quando clico no link do ".html"
_________________________________________
#paragrafo {
display:none;
}
_________________________________________


Nenhum comentário: