Come il codice JavaScript per più di un Banner

July 12

Gli sviluppatori web possono manipolare dinamicamente gli elementi della pagina Web utilizzando JavaScript, purché ogni elemento ha un ID univoco. Il Document Object Model JavaScript (DOM) prevede eventi che identificano in modo univoco gli elementi della pagina, quindi dinamicamente li alterano in una varietà di modi. Alterazioni includono attributi di stile, funzioni e posizioni all'interno dell'interfaccia utente.

istruzione

1 Aprire un editor di testo e creare un file denominato changeBanners.html. Inserire tag HTML di base:

<Html>
<Head> </ head>
<Body> </ body>
</ Html>

2 Aggiungere un tag "<div>" tra il file "<body>" e "</ body>" tag. Assegnare i seguenti attributi di stile per il tag "<div>":

<Div id = stile "bannerOne" = "border: 1px solid; height: 30px; width: 100px;">
</ Div>

È possibile modificare qualsiasi di questi valori per soddisfare il vostro disegno.

3 Aggiungere un secondo "<div>" tag con i seguenti attributi:

<Div id = stile "bannerTwo" = "border: 1px solid; height: 50px; width: 50px;">
</ Div>

4 Aggiungere un tag di ancoraggio "<a>" dopo il secondo tag "</ div>":

<a href="#"> Clicca per cambiare Banner </a>

5 Modificare il tag "<a>" per aggiungere un "onclick ()" evento. L'evento chiama una funzione denominata "codeBanners" e passa due colori alla funzione:

<a href="#" onclick='codeBanners('blue','green')'> Clicca per cambiare Banner </a>

6 Aggiungere un paio di delimitatori JavaScript, "<script>" e "</ SCRIPT>," tra il "<head>" e "</ head>" tag. Dare il tag di apertura "<script>" il seguente attributo "tipo":

<Script type = "text / javascript">
</ Script>

7 Include una funzione denominata "codeBanners" tra i delimitatori JavaScript:

<Html>
<Head>
<Script type = "text / javascript">
codeBanners funzione (firstColor, secondColor)
{
document.getElementById ( 'bannerOne') style.background = firstColor.;
document.getElementById ( 'bannerTwo') style.background = secondColor.;
}
</ Script>
</ Head>
<Body>
<Div id = stile "bannerOne" = "border: 1px solid; height: 30px; width: 100px;"> </ div>
<Div id = "bannerTwo" style = "border: 1px solid; height: 50px; width: 50px;"> </ div>
<a href="#" onClick="codeBanners('blue','green')"> Clicca per cambiare Banner </a>
</ Body>
</ Html>

La funzione "codeBanners" recupera i due colori inviati utilizzando il ") onClick (" la funzione. Si fa riferimento anche "bannerOne" e cambia il suo colore di blu, poi i riferimenti "bannerTwo" e cambia il suo colore verde. Salvare e chiudere il file.

8 Aprire il file in un browser Web. Fare clic su "Clicca per cambiare Banner" collegamento ipertestuale e verificare che le bandiere cambiano colore.

Consigli e avvertenze

  • JavaScript può essere usato per cambiare più di due elementi in qualsiasi data pagina Web.
  • JavaScript non è solo, modificando in modo dinamico "<div>" tag banner. Praticamente ogni elemento della pagina Web con un ID univoco può essere codificato per modificare dinamicamente.
  • Alcuni vecchi browser e versioni di browser non possono implementare JavaScript completamente.