Come aggiornare DIV / Nwlapcug.com

Divs hanno sostituito le tabelle come il quadro dietro la progettazione di siti Web. È utilizzare div per contenere contenuti quali testo, immagini e file multimediali. Questi div possono variare in base all'interazione dell'utente con la pagina. Ad esempio, facendo clic su un pulsante puoi modificare il testo nel div o alterare il colore del div. È possibile immettere il codice per creare entrambi gli effetti.

Istruzioni

1

Aprire un documento HTML esistente o crearne uno nuovo nel testo dell'editor.

2

Inserire un vuoto div con ID "sampleDiv" e due pulsanti con la classe di "pulsante" tra i tag < body > e < / body >. I pulsanti attivano le funzioni JavaScript chiamato "changeText" e "ModificaColore" come qui sotto:

< div id = "sampleDiv" >

< / div >

< pulsante di tipo = "button" class = "button" onclick="changeText()" > aggiungere testo < / button >

< pulsante di tipo = "button" class = "button" changecolor "> cambiare colore < / button >

3

Inserire lo stile seguente per il div e pulsanti tra i tag < head > e < / head > nel documento HTML. Rendere il div 200 pixel di larghezza e 50 pixel profonda con un bordo nero. Aggiungere alcune imbottiture ai pulsanti. Creare uno stile per una classe denominata "redColor" che cambia il colore di sfondo di un elemento al rosso.

< style type = "text/css" >

sampleDiv {width: 200px; altezza: 50px; border: sottile nero a tinta unita; padding: 20px 5px 5px 10px;}

tasto {margin: 20px 0 0 0;}

.redColor {background-color: #red;}

< / stile >

4

Inserire le seguenti funzioni JavaScript sotto gli stili:

< script type = "text/javascript" >

Function changeText() () {

document.getElementById("sampleDiv").firstChild.nodeValue="You have added text successfully.";

}

Function changeColor() () {

document.getElementById("sampleDiv").className="redColor";

}

< / script >

La prima funzione aggiunge testo alla div. Il secondo cambia colore aggiungendo la classe di "redColor," che si applica lo stile "redColor".

5

Salvare il documento HTML e aprirlo nel browser. Fare clic su ciascun pulsante per osservare l'effetto desiderato. Il codice completo apparirà come segue:

< html >

< head >

< style type = "text/css" >

sampleDiv {width: 200px; altezza: 50px; border: sottile nero a tinta unita; padding: 20px 5px 5px 10px;}

.redColor {background-color: #red;}

tasto {margin: 20px 0 0 0;}