Hvordan endre HTML-elementer i Javascript

April 19  by Eliza

Fokus for CSS er på HTML-elementet. CSS svar på spørsmålet om hvordan en <p> tag vises til betrakteren. Det finnes to metoder for å arbeide med HTML-elementer Statisk: som en del av den enkelte tag og innenfor en overskrift som definerer en stil for alle tagger av samme type.

Ita € ™ s en feil å anta at alle nettlesere gjengi CSS nøyaktig det samme. To nettlesere på samme system som kjører samme operativsystem tilbyr ofte litt ulike presentasjoner. I tillegg ita € ™ s en feil å tro at en nettleser skal gi et helhetlig utseende på alle plattformer som støttes.

For eksempel, presenterer Firefox litt forskjellige skjermer når du bruker Mac OS X, Linux og Windows. En nettleser kan også vise side annerledes når enhets begrensninger etterspørsel. En side vist 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.

Hvordan arbeide med HTML-kodene

Ett av alternativene for konfigurering av HTML-koder på en side er å fange alle kodene av en viss type og formatere dem som en del av en loop. Thatâ € ™ s hva følgende eksempel gjør.

funksjons ChangeStyles ()
{
// Endre <h1> tag stil.
Var Header = document.getElementsByTagName ("h1")
for (var i = 0; i <Header.length; i ++)
{
Header [i] .style.fontFamily = "Arial";
Header [i] .style.fontSize = "45px";
Header [i] .style.fontWeight = "fet";
Header [i] .style.color = "grønn";
Header [i] .style.textAlign = "center";
Header [i] .style.marginLeft = "20px";
Header [i] .style.marginRight = "20px";
Header [i] .style.border = "medium dobbel grønn";
}

// Endre <p> tag stil.
Var Para = document.getElementsByTagName ("p");
for (var i = 0; i <Para.length; i ++)
{
Para [i] .style.fontFamily = "serif";
Para [i] .style.fontStyle = "italic";
Para [i] .style.fontSize = "1em";
Para [i] .style.color = "blue";
}
}

I dette tilfelle bruker eksempelet getElementsByTagName () for å oppnå en oppstilling av alle de elementer av en bestemt type på en side. Eksempelet formaterer begge <h1> og <p> koder på siden. Når du har en liste over disse elementene, kan du formatere hvert element i sving ved å bruke en for løkke som vist. Eksempelet viser en rekke vanlige formateringsoppgaver, inkludert innstilling element marginer.

Når youâ € ™ re arbeider med grafiske filer, for eksempel en grense, hjelper det å ha en forståelse av hvor de ulike stilene passer inn i bildet. For eksempel margen påvirker avstanden mellom kanten av skjermen og grensen, og polstring påvirker avstanden mellom rammen og innholdet den omslutter.

Du bør legge merke til noen funksjoner i dette eksempelet. En fontfamily eiendom kan inneholde et familienavn, for eksempel Arial eller et generisk navn, for eksempel serif. Skriftstørrelsen kan dukke opp i piksler (px) eller EMS (ett em er lik 16 px), blant andre verdityper. Du kan også bruke relative tiltak for skriftstørrelsen, slik som små.

Hvordan endre HTML-elementer i Javascript

Hvordan arbeide med overskriften stiler

De fleste utviklere er vant til å jobbe med en <style> -taggen som vises i <head> element på en side. Javascript er i stand til å konstruere en <style> -taggen for deg programma som vist i følgende eksempel.

funksjons ChangeStyles ()
{
// Skaffe tilgang til spissen.
Hode = document.getElementsByTagName ("hodet") [0];

// Opprett en <style> -taggen.
StyleTag = document.createElement ("stil");

// Sett <style> -taggen type.
StyleTag.type = "text / css";

// Lag en variabel for å holde informasjonen stil.
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 dobbel grønn;}" +
"P {font-family: serif; font-style: italic;" +
"Font-size: 1em; color: blue}";

// Legg stilen til <style> -taggen.
StyleTag.appendChild (document.createTextNode (Styles));

// Legg til <style> -taggen til overskriften.
Head.appendChild (StyleTag);
}

Forskjellen i dette eksemplet er at formateringsinformasjonen vises i <style> -taggen i stedet for med hvert element individuelt. For å gjøre dette eksempelet arbeid, konstruerer du <style> -taggen innhold som en streng.

Søknaden deretter bruker createTextNode () -funksjonen til å slå strengen til en tekst node og setter den som innhold for <style> -taggen, StyleTag, ved hjelp appendChild (). Å legge til <style> -taggen i <head> element, kaller koden appendChild () fungere for andre gang.

Hvordan arbeide med IDer

Å endre utseendet på bestemte koder, må du jobbe med spesifikke IDer som vist i følgende eksempel.

funksjons ChangeStyles ()
{
// Endre <h1> tag stil.
Var Header = document.getElementById ("Header");
Header.style.fontFamily = "Arial";
Header.style.fontSize = "45px";
Header.style.fontWeight = "fet";
Header.style.color = "grønn";
Header.style.textAlign = "center";
Header.style.marginLeft = "20px";
Header.style.marginRight = "20px";
Header.style.border = "medium dobbel grønn";

// Endre <p> tag stil.
Var Para = document.getElementById ("Avsnitt");
Para.style.fontFamily = "serif";
Para.style.fontStyle = "italic";
Para.style.fontSize = "1em";
Para.style.color = "blue";
}

I dette tilfelle er bare de elementer med de spesifikke identifikatorer levert av koden til getElementById () -funksjonen modifisert utseende. For eksempel, når koden kaller document.getElementById ("Header"), mottar Header en referanse til objektet med en id av Header, og de endringer som følger bare påvirke det aktuelle objektet. Utgangen er lik de to andre eksempler annet ledd er uendret, bortsett fra.