È possibile nascondere un div nella pagina Web con JavaScript impostando la sua proprietà di stile "visibilità" a "nascosto". Ma cosa succede se si desidera nascondere i suoi contenuti, preservando i bordi o altri stili applicati ad esso? Il "innerHTML" proprietà di un elemento HTML viene utilizzato per recuperare o modificare il contenuto all'interno dell'elemento, compresi 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 con "innerHTML" e ripristinarlo se la funzione è chiamato di nuovo. Utilizzare questa funzione per attivare o disattivare la visibilità dei contenuti di un div senza nascondere il div stesso.

istruzione

1 Inserire il codice seguente tra i tag di apertura e di chiusura "testa" del documento HTML:

<Script type = "text / javascript">

var iHTML = new Array ();

Funzione toggleInnerHTML (id) {

if(document.getElementById(id).innerHTML){

iHTML [id] = document.getElementById (id) .innerHTML;

document.getElementById (id) .innerHTML = "";

}altro{

document.getElementById (id) .innerHTML = iHTML [id];

}

}

</ Script>

2 Assegnare valori degli attributi unici "id" per eventuali div che si desidera utilizzare la funzione. Per esempio:

<Div id = "div1"> È possibile nascondere e visualizzare questo testo. </ Div>

3 Chiamare la funzione "toggleInnerHTML" con valore "id" di un div per nascondere o mostrare il suo contenuto. Provarlo con un pulsante:

<Input type = valore "pulsante" = "Toggle div contenuti" onclick = "toggleInnerHTML ( 'div1');" />