Manipulando DIV com JavaScript

05/09/2008

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

Página em JavaScript

 

funcao.js

var div = "manipulada";
// atribuir o nome da div que quer mostrar e ocultar

function AparecerDiv(){ // função aparecer
	document.getElementById(div).style.display = "block";
	// usamos o style.display para manupular o css da div e mostrar ela
}

function OcultarDiv(){  // função ocultar
	document.getElementById(div).style.display = "none";
	// usamos o style.display para manupular o css da div e ocultar ela
}

Teste.html

<html>
<head>
<script language="javascript" src="funcao.js"></script>
</head>
<body>
<span onClick="AparecerDiv();" style="cursor: pointer;"><u>Aparecer Div</u></span>
<br><br>
	<div id="manipulada" style="display: none;">
		Conteúdo da div escondida&nbsp;&nbsp;&nbsp;<span onClick="OcultarDiv();" style="cursor: pointer;">[<u>x</u>]</span>
	</div>
</body>
</html>

Um código simples para quem precisa manipular uma div com facilidade:

Agência OFF, desenvolvimento de soluções web para as Agências Digitais


por Ted k' |
6 Comentários |
HTML, JavaScript / Ajax / DHTML

6 Respostas para Manipulando DIV com JavaScript

  1. rod 27/04/2009 at 11:30 AM | Permalink |

    fácil mesmo.
    mas esse código vai funcionar no internet explorer tb?

  2. Ted k' 27/04/2009 at 5:48 PM | Permalink |

    sim man, funciona no IE 6, IE 7 e IE 8.

  3. Miguel 13/05/2009 at 10:31 PM | Permalink |

    Um cõdigo mas facil e que vc pode aproveitar em qualquer área do site:
    function Divis(id){
    if(document.getElementById(id).style.display==”none”){
    document.getElementById(id).style.display=”inline”;
    }
    else{
    document.getElementById(id).style.display=”none”;
    }
    }
    Chamando a funcao e informando qual q DIV vai aparecer.
    Clear

  4. sérgio 05/12/2009 at 9:35 PM | Permalink |

    Não funcionou não

  5. Daniele Souza 27/09/2010 at 11:53 AM | Permalink |

    Para facilitar o usuário, na utilização de várias div’s por exemplo, coloquei da seguinte forma o código javascript:

    //Mostrar o conteúdo dentro da DIV através do id
    function AparecerDiv(id){
    if ( document.getElementById(id).style.display == “block” )
    {
    document.getElementById(id).style.display = “none”;
    }
    else{
    document.getElementById(id).style.display = “block”;
    }
    }

    O parâmetro onde está (id) deve ser informado um nome qualquer, para que ele identifique que deverá abrir e fechar no mesmo link, sendo que no HTM podemos colocar assim:

    Testem e Boa Sorte!

  6. Leandro 30/07/2011 at 10:06 AM | Permalink |

    Usei esa função no onclick do checkbox

    function verificaChecks() {
    if (document.form.Checkbox1.checked == true){
    document.getElementById(“id_div”).style.display = “none”;
    }else{

    document.getElementById(“div”).style.display = “block”;
    };
    };

Deixe seu Comentário