Slik endrer du HTML-elementer i JavaScript-dummies

Fokuset på CSS er på HTML-elementet. CSS besvarer spørsmålet om hvordan en

-kode vises for betrakteren. Det finnes to metoder for å arbeide med HTML-elementer statisk: Som en del av den enkelte taggen og i en overskrift som definerer en stil for alle tagger av samme type.

Det er en feil å anta at alle nettlesere gjør CSS nøyaktig det samme. To nettlesere på samme system som kjører det samme operativsystemet, tilbyr ofte litt forskjellige presentasjoner. I tillegg er det en feil å tro at en nettleser vil gi et konsekvent utseende på alle plattformer som den støtter.

Firefox presenterer for eksempel litt forskjellige skjermer når du bruker Mac OS X, Linux og Windows. En nettleser kan også vise siden annerledes når enhetsbegrensninger krever. En side som vises på en smarttelefon skjerm, er forskjellig fra den samme siden som vises på en PC. Tenk på CSS som mer av en retningslinje enn et absolutt krav.

Slik jobber du med HTML-koder

Et av alternativene for å konfigurere HTML-kodene på en side er å ta tak i alle taggene av en bestemt type og formatere dem som en del av en loop. Det er det følgende eksempelet gjør.

funksjon ChangeStyles () {// Modifiser
tag stilen. var Header = dokument. getElementsByTagName ("h1") for (var i = 0; i tag stilen. var Para = dokument. getElementsByTagName ("p"); for (var i = 0; i 
I dette tilfellet bruker eksemplet getElementsByTagName () for å få en rekke av alle elementene av en bestemt type på en side. Eksemplet formaterer både
og
-koder på siden. Når du har en liste over disse elementene, kan du formatere hvert element i sin tur ved å bruke en forløkke som vist. Eksemplet viser en rekke vanlige formateringsoppgaver, inkludert innstilling av elementmarginer.






Når du jobber med grafiske tillegg, for eksempel en kantlinje, hjelper det å forstå hvordan de forskjellige stilene passer inn i bildet. For eksempel påvirker marginen avstanden mellom kanten på skjermen og grensen, og polstring påvirker avstanden mellom grensen og innholdet den omslutter.
Du bør legge merke til noen få funksjoner i dette eksemplet. En fontFamily-egenskap kan inneholde et etternavn, for eksempel Arial, eller et generisk navn, for eksempel serif. Skriftstørrelsen kan vises i piksler (px) eller ems (en em er lik 16 px), blant annet verdi typer. Du kan også bruke relative tiltak for skriftstørrelsen, for eksempel liten.


Slik jobber du med overskriftsstiler
De fleste utviklere er vant til å jobbe med en tag som vises i elementet på en side. JavaScript er i stand til å konstruere en tag for deg programmatisk som vist i følgende eksempel.
funksjon ChangeStyles () {// Få tilgang til overskriften. Hodet = dokument. getElementsByTagName ("hode") [0]; // Opprett en tagg. StyleTag = dokument. createElement ("stil"); // Sett tag type. StyleTag. type = "text / css"; // Opprett en variabel for å holde stilinformasjonen. var Styles = "h1 {font-family: Arial; font-size: 45px;" + "font-weight: bold; color: green; text-align: center;" + "margin-left: 20px; margin-right: 20px;" + "border: medium double green;}" + "p {font-familien: serif; font-style: kursiv;" + "skriftstørrelse: 1em; farge: blå}"; // Legg stilen til taggen. StyleTag. appendChild (dokument. createTextNode (Stiler)); // Legg til taggen i overskriften. Hode. appendChild (StyleTag);}

Forskjellen i dette eksemplet er at formateringsinformasjonen vises i taggen i stedet for med hvert element enkeltvis. For å gjøre dette eksemplet virket, konstruerer du taginnholdet som en streng.
Søknaden bruker deretter createTextNode () -funksjonen til å slå strengen til en tekstknute og legger den inn som innhold for taggen StyleTag, ved hjelp av appendChild (). For å legge til taggen til elementet, kaller koden funksjonen appendChild () en gang til.

Slik jobber du med IDer
For å endre utseendet til bestemte koder, må du jobbe med bestemte ID som vist i følgende eksempel.
funksjon ChangeStyles () {// Endre
tag stilen. var Header = dokument. getElementById ("Header"); Overskrift. stil. fontFamily = "Arial"; Overskrift. stil. fontSize = "45px"; Overskrift. stil. fontWeight = "bold"; Overskrift. stil. farge = "grønn"; Overskrift. stil. textAlign = "center"; Overskrift. stil. marginLeft = "20px"; Overskrift. stil. marginRight = "20px"; Overskrift. stil. border = "medium double green"; // Endre
tag stilen. var Para = dokument. getElementById ("Avsnitt"); Para. stil. fontFamily = "serif"; Para. stil. fontStyle = "kursiv"; Para. stil. fontSize = "1em"; Para. stil. farge = "blå";}

I dette tilfellet endres bare elementene med de spesifikke identifikatorene som er oppgitt av koden til getElementById () -funksjonen. For eksempel, når koden kaller dokument. getElementById ("Header"), Header mottar en referanse til objektet med et ID for Header, og endringene som følger bare påvirker det aktuelle objektet. Utgangen er lik de to andre eksemplene, bortsett fra andre ledd, forblir uendret.