Sette inn elementer med DIV i Javascript

Sette inn elementer med DIV i Javascript


Javascript gir programmerere verktøy for å endre den usynlige rammen av en webside som kalles Document Object Model (DOM). DOM er programmeringsgrensesnitt for Hypertext Markup Language (HTML). Javascript metoden getElementById () kan få tilgang til siden divisjon tag "div" for å legge til eller endre HTML styling informasjon som bakgrunner, fonter, grenser, bredder og posisjonering. I tillegg kan innerhtml eiendommen endre innholdet mellom <div> </ div> tagger. HTML-koder må merkes med en ID før getElementById () metoden kan finne og få tilgang til dem.

Bruksanvisning

1 Start standard ren tekst editor program som er tilgjengelig på datamaskinen.

2 Skriv inn følgende kode inn i teksteditor:

<Html>

<Head>

<Style type = "text / css"> <! -

indre {

width: 200px;

height: 20px;

background-color: red;

Farge: hvit;

font-size: 15px;

text-align: right;

}

-> </ Style>

<Script language = "javascript">

fungere changeDiv () {

document.getElementById ( "indre") style.width = "500px.";

. Document.getElementById ( "indre") style.height = "220px";

. Document.getElementById ( "indre") style.fontSize = "62px";

. Document.getElementById ( "indre") style.textAlign = "center";

. Document.getElementById ( "indre") style.backgroundColor = "# FFB3B3";

. Document.getElementById ( "indre") style.border = "4px stiplet rød";

. Document.getElementById ( "indre") style.color = "black";

document.getElementById ( "indre") innerhtml = "Javascript kan sette styling og innholdselementer i en Div.";

. Document.getElementById ( "MyButton") value = "Og det fungerer!";

}

</ Script>

</ Head>

<Body>

<Div id = "indre"> her er den røde div </ div>

<Input id = "MyButton" type = "button" onclick = "changeDiv ()" value = "Klikk på denne knappen for å sette inn ny informasjon i den røde div ovenfor" />

</ Body>

</ Html>

3 Klikk på Fil-menyen. Velg "Lagre" alternativet. Lagre under filnavnet "test.html."

4 Start nettleseren som er tilgjengelig på datamaskinen. Klikk på "File" menyen og velg "Åpne fil".

5 Finn filen "test.html" du nettopp opprettet, velger du den med musen og klikk på "Open".

6 Klikk på knappen merket "Klikk på denne knappen for å sette inn nye Info Into the Red Div Above."

Hint

  • Javascript-kode kan plasseres hvor som helst mellom "<head> </ head>" og "<body> </ body>" koder. For kode som skal utføres automatisk i kroppen, bør koden plasseres før HTML-elementer det er ment å handle på. I eksempel en, modifiserer Javascript-kode div merket "indre". I eksempel to, utfører Javascript, men ingenting endres. Forsettlig plassere Javascript-kode for å sikre de resultatene du ønsker.
  • eksempel ett
  • <Div id = "indre"> her er den røde div </ div>
  • <Script type = "text / javascript">
  • document.getElementById ( "indre") style.width = "500px.";
  • . Document.getElementById ( "indre") style.backgroundColor = "grå";
  • </ Script>
  • eksempel to
  • De store nettlesere vil vise gyldig HTML og CSS-kode annerledes. Selv forskjellige versjoner av den samme nettleseren kan gi uventede visningsproblemer. Test alltid koden på ulike nettlesere og eldre versjoner av samme nettleser for å sikre at koden fungerer som forventet.