Nascondere/visualizzare un blocco div con Javascript
Posted by: supergiovane in JavascriptCon javascript possiamo modificare a nostro piacimento gli attributi CSS degli elementi in una pagina HTML. Vediamo come sfruttare questa possibilita’ per nascondere o visualizzare un blocco div.
Come prima cosa creiamo il blocco assegnandogli un id identificativo
<div id="foo"> Contenuto del Blocco div#foo </div>
Aggiungiamo quindi i controlli che nel nostro caso sono 2 button
<input type="button" value="Visualizza blocco" onClick="display_block();"/> <input type="button" value="Nascondi blocco" onClick="hide_block();"/>
Possiamo notare che alla pressione di un bottone viene richiamata una delle due funzioni display_block() o hide_block() che andremo a definire nell’head della pagina.
<script language="javascript">
function display_block() {
document.getElementById('foo').style.display = "block";
}
function hide_block() {
document.getElementById('foo').style.display = "none";
}
</script>
Quindi quando premiamo per es. il bottone “Nascondi blocco” il browser esegue la funzione javascript hide_block(), la quale va a modificare la proprieta’ display dell’elemento con id=foo (cioe` il nostro blocco div).
Qui di seguito il codice completo della pagina:
<html>
<head>
<script language="javascript">
function display_block() {
document.getElementById('foo').style.display = "block";
}
function hide_block() {
document.getElementById('foo').style.display = "none";
}
</script>
<style>
div#pippo {
display:block;
}
</style>
</head>
<body>
<div id="foo">
Contenuto del Blocco div#foo
</div>
<input type="button" value="Visualizza blocco" onClick="display_block();"/>
<input type="button" value="Nascondi blocco" onClick="hide_block();"/>
</body>
</html>
Entries (RSS)