Visibilidade de Div – CSS e Javascript
Hoje trago um tutorial simples, porém quando bem aplicado pode gerar um resultado muito interessante, envolve CSS e Javascript, geralmente é feito por programadores. Consiste em alterar a visibilidade de uma DIV.
Quando setamos a propriedade visibility como hidden no CSS, fazemos com que o objeto desapareça da tela, entretando o seu espaço fica vazio. Já quando setamos a propriedade display como none, fazemos com que o objeto desapareça e seu espaço também, assim se existir outro elemento embaixo do que desapareceu, esse irá tomar o seu lugar.
<html>
<head>
<title>Tutorial - Abrir e Fechar Div</title>
<style type="text/css">
div.camada1{
background-color: cyan;
width:100px;
height:100px;
position:absolute;
top:50px;
left:50px;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-style:solid;
border-right-color:navy;
border-bottom-color:navy;
border-left-color:navy;
border-top-color:navy;
}
div.camada2{
background-color: yellow;
width:100px;
height:100px;
position:absolute;
top:50px;
left:180px;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-top-style:solid;
border-right-color:navy;
border-bottom-color:navy;
border-left-color:navy;
border-top-color:navy;
}
</style>
<script language="javascript">
function alteraVisibilidade()
{
cam = document.getElementById('c1');
if(cam.style.visibility == 'hidden')
cam.style.visibility = 'visible';
else
cam.style.visibility = 'hidden';
}
function alteraVisibilidade2()
{
cam = document.getElementById('c2');
if(cam.style.display == 'none')
cam.style.display = 'inline';
else
cam.style.display = 'none';
}
</script>
</head>
<body>
<div id="c1" class="camada1">Texto da camada 1</div>
<div id="c2" class="camada2">Texto da camada 2</div>
<form action="" method="get">
<input name="" type="button" onClick="alteraVisibilidade();" value="Alterar Camada 1" />
<input name="" type="button" onClick="alteraVisibilidade2();" value="Alterar Camada 2" />
</form>
</body>
</html>
Quando os botões são clickados chamam as funções javascript que pegam os elementos pelo id (getElementById), assim seta as propriedades, escondendo as DIV’s.
Caso tenha problemas, baixe o arquivo AQUI.
Posts relacionados:
Tags: CSS, dom, esconder elemento javascript, html, JavaScript, Tutoriais
Postado em quinta-feira, maio 8th, 2008 at 1:20 na categoria Tutoriais. Siga o RSS 2.0 feed. You can leave a response, or trackback from your own site.
13/08/2009 as 15:37
muito bom seu artigo era o que eu procurava parabens..
15/01/2011 as 16:20
Bom artigo, gostei de aprender como brincar com isso.
14/06/2011 as 13:58
Bom artigo,tirou minha duvida