Come modificare un DIV Dopo un clic

November 23

Come modificare un DIV Dopo un clic


Clicca qualcosa in una pagina Web, e qualcosa accade di solito. Se lo sviluppatore del sito aggiunto logica script per l'oggetto che si sceglie, come ad esempio un DIV, l'oggetto può modificare il suo aspetto. colori del testo e possono cambiare i confini di vari stili possono apparire attorno al DIV. Creare un DIV che cambia quando si fa clic con l'aggiunta di un gestore di eventi "onclick" al DIV dopo il caricamento della pagina Web. Questo evento può quindi chiamare una funzione JavaScript che cambia caratteristiche di stile del div.

istruzione

1 Avviare un editor HTML o Notepad.

2 Aprire un documento HTML e aggiungere un DIV alla pagina incollando il seguente codice nella sezione body del documento:

<Div id = "div1">

<H1> Titolo </ h1>

Questo DIV contiene un'intestazione. id del DIV è "div1".

3 Aggiungere il seguente codice CSS per sezione head del documento:

.style1

{Border: rosso; colore nero; background-color: yellow; border-style: tratteggiate; border-width: 2px;

}

.style2

{Border: rosso; colore: verde; background-color: white; border-style: dotted; border-width: 10px;

}

Questo codice crea due classi CSS denominati "style1" e "style2." Ogni stile ha valori diversi per i suoi attributi di stile. La classe "style1", per esempio, definisce un bordo rosso, e ogni elemento fa riferimento a questa classe acquista un bordo rosso.

4 Incolla questo codice JavaScript nella sezione dello script del documento:

var divToChange = "div1";

var currentStyle = "style1";

window.onload = function () {

var divObj = document.getElementById(divToChange);

divObj.onclick = function () {

divObj.className = currentStyle;

}

}

Questo codice imposta il valore della variabile "divToChange" per id del DIV dichiarato nella sezione corpo. La variabile currentStyle contiene il nome della classe che contiene le impostazioni di stile che si desidera applicare al DIV quando si fa clic. Il "window.onload" chiama anche la funzione che cambia "className" del DIV al valore memorizzato in "currentStyle."

5 Salvare il documento e aprirlo in un browser. Il browser visualizza la pagina. Il DIV contenente il titolo appare in quella pagina. Fare clic sul DIV e acquisisce un bordo rosso fatto di trattini e uno sfondo giallo.

6 Tornare al codice HTML e modificare il valore "currentStyle" a "style2." Salvare il documento e tornare al browser. Premere il tasto "F5" per aggiornare la pagina del browser. Il DIV con l'intestazione appare senza styling. Fare clic sul DIV. Esso acquisisce le caratteristiche di stile definite nella classe CSS "style2", diventa verde, l'aumento della dimensione di confine a 10 pixel e lo sfondo diventa bianco.

Consigli e avvertenze

  • Queste sono solo alcune delle caratteristiche di stile che è possibile applicare al div elementi. Internet contiene utili siti CSS che descrivono le proprietà che è possibile utilizzare per modificare l'aspetto dei vostri elementi DIV. È sufficiente creare una nuova classe CSS che contiene gli attributi visivi che si desidera utilizzare, e assegnare quel nome alla variabile "currentStyle", come descritto in questi passaggi.

Articoli Correlati