Pubblicato da Con il sacro javascript si possono fare molte cose, e questo è un fatto.
Una delle cose più interessanti però, è quella di far sparire oggetti in una pagina web, o di farli apparire, semplicemente con il click del mouse.
Vediamo quindi come nascondere un oggetto in javascritp, e come farlo riapparire, con la sola imposizione del mouse (cit.).
Come nascondere / mostrare un oggetto in Javascript
Fino ad ora ho parlato al singolare, ma ovviamente è possibile anche far sparire più elementi tramite js.
Infatti, il mio consiglio è quello di inserire questi elementi all'interno di un div o di uno span, in modo tale da poter nascondere in un colpo solo più righe di codice html (o per meglio dire, il loro risultato a video viene nascosto).
Altra premessa, in questo breve tutorial spiegherò si una tecnica javascript, ma anche la sintassi css da utilizzare per compiere queste operazioni html con i fogli di stile.
Dopo tutte queste premesse, ecco il codice d'esempio che consente di nascondere un div con il javascript:
<html>
<head>
<title>Nascondere / mostrare div con javascript e css</title>
</head>
<body>
<div id="mostrato" style="display:inline;">(<a href="javascript:void(0);" onclick="document.getElementById('nascosto').style.display='inline';document.getElementById('mostrato').style.display='none';">+</a>)</div>
<div id="nascosto" style="display:none;">Contenuto div nascosto (<a href="javascript:void(0);" onclick="document.getElementById('mostrato').style.display='inline';document.getElementById('nascosto').style.display='none';">-</a>)</div>
</body>
</html>
Se copi ed incolli questo codice html in un file di testo e poi lo rinomini come prova.html e lo lanci con il browser, potrai vederne il suo funzionamento.
Praticamente, grazie alla funzione getElementById si ricava l'id dell'elemento da nascondere/mostrare, poi tramite la proprietà style.diplay, gli si dice di nasconderlo (none) o mostrarlo (inline, block, ecc...).
Quindi ricapitolando, per nascondere un div in javascript si può scrivere:
document.getElementById('id-div').style.display='none';
Invece per mostrare un div nascosto in js, si può scrivere:
document.getElementById('id-div').style.display='inline';
Ovviamente occorre dare un id all'elemento contenitore da mostrare/nascondere, e passare il giusto id alla funzione js che cambia lo stile a suddetto oggetto.
Spero di essere stato abbastanza chiaro, in caso contrario... vai di commenti :)
Piaciuto l'articolo? Lascia un commento!
EmoticonEmoticon