È possibile nascondere un div nella pagina Web con JavaScript impostando la proprietà di stile di "visibilità" su "hidden". Ma cosa succede se si desidera nasconderne il contenuto preservando i bordi o altri stili applicati ad esso? La proprietà "innerHTML" di un elemento HTML viene utilizzata per recuperare o modificare il contenuto all'interno dell'elemento, inclusi i tag HTML e testo. La proprietà "innerHTML" è compatibile con tutti i browser moderni, tra cui Safari. Scrivere una funzione per rimuovere e archiviare il contenuto di un div utilizzando "innerHTML" e ripristinarlo nel caso in cui la funzione viene chiamata nuovamente. Utilizzare questa funzione per alternare la visibilità del contenuto di un div senza nascondere il div stesso.
Istruzioni
1
Inserire il seguente codice tra l'apertura e chiusura tag "testa" del documento HTML:
< script type = "text/javascript" >
iHTML var = new Array ();
Function toggleInnerHTML(id) () {
if(document.getElementById(id).innerHTML){
iHTML[id] = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML = "";
}else{
document.getElementById(id).innerHTML = iHTML[id];
}
}
< / script >
2
Assegnare i valori di attributo "id univoco" in qualsiasi div che si desidera utilizzare la funzione su. Per esempio:
< div id = "div1" > è possibile nascondere e visualizzare questo testo. < / div >
3
Chiamare la funzione di "toggleInnerHTML" con valore "id" di un div per nascondere o mostrare il suo contenuto. Provarlo con un pulsante:
< input type = valore "pulsante" = "Toggle div contenuto" onClick="toggleInnerHTML('div1');" / >