Hvordan kode Javascript for mer enn én Banner

Webutviklere kan dynamisk manipulere websideelementer ved hjelp av Javascript, så lenge hvert element har en unik ID. Javascript Document Object Model (DOM) gir hendelser som er entydig sidens elementer, så dynamisk endrer dem på en rekke måter. Endringer inkluderer stil attributter, funksjoner og steder i brukergrensesnittet.

Bruksanvisning

1 Åpne en teksteditor og lage en fil som heter changeBanners.html. Sett inn grunnleggende HTML-koder:

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

2 Legg en "<div>" tag mellom filen "<body>" og "</ body>" koder. Tildele følgende stilattributter til "<div>" tag:

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

Du kan endre noen av disse verdiene som passer din design.

3 Legg en andre "<div>" tag med følgende attributter:

<Div id = "bannerTwo" style = "border: 1px solid; høyde: 50 piksler, bredde: 50 piksler;">
</ Div>

4 Legg et anker tag "<a>" etter den andre "</ div>" tag:

<a href="#"> Klikk for å endre bannere </a>

5 Rediger "<a>" tag å legge til en "onclick ()" event. Arrangementet kaller en funksjon som heter "codeBanners" og passerer to farger til funksjonen:

<a href="#" onclick='codeBanners('blue','green')'> Klikk for å endre bannere </a>

6 Legg et par Javascript skilletegn, "<script>" og "</ script>" mellom "<head>" og "</ head>" koder. Gi den åpne "<script>" tag følgende "type" attributt:

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

7 Ta med en funksjon som heter "codeBanners" mellom Javascript skilletegn til:

<Html>
<Head>
<Script type = "text / javascript">
funksjons codeBanners (firstColor, secondColor)
{
document.getElementById ( 'bannerOne') style.background = firstColor.;
document.getElementById ( 'bannerTwo') style.background = secondColor.;
}
</ Script>
</ Head>
<Body>
<Div id = "bannerOne" style = "border: 1px solid; height: 30px; width: 100px;"> </ div>
<Div id = "bannerTwo" style = "border: 1px solid; høyde: 50 piksler, bredde: 50 piksler;"> </ div>
<a href="#" onClick="codeBanners('blue','green')"> Klikk for å endre bannere </a>
</ Body>
</ Html>

Den "codeBanners" -funksjonen henter de to fargene som sendes ved hjelp av "onClick ()" -funksjon. Det refererer også "bannerOne" og skifter farge til blå, så referanser "bannerTwo" og skifter farge til grønt. Lagre og lukk filen.

8 Åpne filen i en nettleser. Klikk på "Klikk for å endre bannere" hyperkobling og kontrollere at bannere skifter farge.

Hint

  • Javascript kan brukes til å endre mer enn to elementer i en gitt webside.
  • Javascript er ikke begrenset til å dynamisk endre "<div>" tag bannere. Nesten enhver webside element med en unik ID kan kodes til å endre dynamisk.
  • Noen eldre nettlesere og nettleserversjoner kan ikke implementere Javascript helt.