Hvordan Lukk en DIV i Javascript
Når nettlesere laste HTML-sider, genererer de en representasjon av siden i en omvendt trestruktur som kan manipuleres dynamisk ved hjelp av Javascript. Page brukergrensesnitt manipulasjon håndteres ved å tilordne elementer i sidehenvisninger - IDer eller navn - som kan identifiseres og endret som svar på brukerinteraksjoner, for eksempel klikke knapper. Denne prosessen gjør at webutviklere å åpne, lukke, flytte eller slette identifiserte elementer, for eksempel DIV seksjoner, som svar på de brukerinteraksjoner.
Bruksanvisning
1 Åpne en teksteditor og opprette en ny tekstfil, typisk ved å velge "Ny" fra Fil-menyen. Legg noen grunnleggende HTML-koder til filen, og navnet på filen closeDiv.html. Etter trinn 1, vil closeDiv.html se ut som vist:
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Rediger closeDiv.html ved å legge til en <script> og </ script> tag i HTML. Plassere disse kodene mellom <head> og </ head> taggene og gi <script> tag en type egenskap av text / javascript for å indikere script språk. Etter trinn 2, vil closeDiv.html se ut som vist:
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
3 Erklærer en Javascript-funksjon mellom <script> og </ script> tags oppkalt closeThisDiv () og følg erklæring med to klammeparentes - {og}. Etter trinn 3, vil closeDiv.html se ut som vist:
<Html>
<Head>
<Script type = "text / javascript">
fungere closeThisDiv ()
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Deklarere en variabel som heter openDiv mellom funksjonens åpne og lukke klammeparentes. Bruk document.getElementById () metode for å hente en referanse til div divName, og tildele referansen til openDiv variabel. Etter trinn 4, vil createTable.html se ut som vist:
<Html>
<Head>
<Script type = "text / javascript">
fungere closeThisDiv ()
{
Var openDiv = document.getElementById ( 'divName');
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Sett openDiv variabel display stil til "ingen". Denne stilen viser at divName DIV elementet ikke skal vises og bør fjernes fra formatet struktur. Etter trinn 5, vil closeDiv.html se ut som vist:
<Html>
<Head>
<Script type = "text / javascript">
fungere closeThisDiv ()
{
Var openDiv = document.getElementById ( 'divName');
openDiv.style.display = 'none';
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
6 Legg en <div> tag mellom closeDiv.html s <body> og <body> -kodene og sette tag id verdien til "divName" (dette er tag referanse). Legg teksten "Denne teksten er i en DIV" etter den åpne <div> tag og lukk </ div> tag. Etter trinn 6, vil closeDiv.html se ut som vist:
<Html>
<Head>
<Script type = "text / javascript">
fungere closeDiv ()
{
Var openDiv = document.getElementById ( 'divName');
openDiv.style.display = 'none';
}
</ Script>
</ Head>
<Body>
<Div id = "divName">
Denne teksten er i DIV
</ Div>
</ Body>
</ Html>
7 Legg en <-knappen> tag umiddelbart etter den nære </ div> tag. Tildele en onClick hendelsen til knappen og sette verdien til "javascript: closeDiv ()" for å indikere at closeDiv () -funksjonen skal kalles når knappen klikkes. Gi knappen teksten "Klikk for å lukke DIV" og lukk </ knappen> tag. Etter trinn 7, vil closeDiv.html se ut som vist:
<Html>
<Head>
<Script type = "text / javascript">
fungere closeThisDiv ()
{
Var openDiv = document.getElementById ( 'divName');
openDiv.style.display = 'none';
}
</ Script>
</ Head>
<Body>
<Div id = "divName">
Denne teksten er i DIV
</ Div>
<-knappen Onclick = "javascript: closeThisDiv ();"> Klikk for å lukke DIV </ knapp>
</ Body>
</ Html>
8 Åpne closeDiv.html i en nettleser. Klikk på "Klikk for å lukke DIV" -knappen for å lukke divName div tag.
Hint
- Id (referanse) verdiene tilordnet elementer i den hensikt å manipulere en side layout kan bli stylet bruker gjennomgripende stilark.
- Blokker kan bli stylet ved hjelp av mange eiendomsverdier, inkludert ingen, blokk, inline, list-element og andre.
- Standardvisningsverdi er inline, så hvis ingen verdi er gitt for skjermen, vil det generere en inline blokk uten linjeskift før eller etter elementet.
- En utstilling av none skaper ingen blokk i det hele tatt, eller fjerner blokken fra displayet. Det gjør ikke blokken usynlig.