Sep/084
Manipulando DIV com JavaScript
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 <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:
Jun/087
Alimentando um campo de texto através de um select
Simples script usando JavaScript, para alimentar um campo "text" através de um campo "select".
Criada uma função alimentarCampo que recebe o valor dos campos do formulário através do metodo "getElementById" com a interação .value
<html>
<head>
<script type="text/javascript">
function alimentarCampo() {
var minhaLista = document.getElementById("minhaLista");
document.getElementById("campoReceber").value = minhaLista.options[minhaLista.selectedIndex].value;
}
</script>
</head>
<body>
<form name="Formulario">
Selecione seu Browser:
<select id="minhaLista" name="campo_selecione" onchange="alimentarCampo();">
<option value="001 Campo do Internet Explorer a Evolução">Internet Explorer</option>
<option value="002 Campo do Firefox a Evolução">Firefox</option>
<option value="003 Campo do Netscape a Evolução">Netscape</option>
<option value="004 Campo do Opera a Evolução">Opera</option>
</select>
<p>Descrição do Browser: <input type="text" id="campoReceber" name="campo" size="50"></p>
</form>
</body>
</html>
Resumo do Código:
Linha:
var minhaLista = document.getElementById("minhaLista");
A variável minhaLista é alimentada através do "ID" do campo "select" que é puxado pelo parâmetro document.getElementById citado acima.
Linha:
document.getElementById("campoReceber").value = minhaLista.options[minhaLista.selectedIndex].value;
No campo do tipo "text" no formulário temos uma "ID" chamada campoReceber que receberá o valor do campo de "select" selecionado pelo usuário através do parâmetro ".options" citado no código acima, pegando assim pelo parâmetro ".value" o valor do campo "option" exposto no "select".
Linha:
<select id="minhaLista" name="campo_selecione" onchange="alimentarCampo();">
E por final chamamos a função criada em JavaScript pelo método "onchange" do formulário.
Dúvidas é só citar!!
Acesse também: Webly
