Hvordan lage en tre kolonne blogg i Javascript

October 16

Vanligvis skaper en nettsides layout er gjort med CSS, eller Cascading Style Sheets. Men i programmering, det er mer enn én måte å gjøre alt, og alle typer oppsett du ønsker å bygge kan også oppnås ved hjelp av Javascript. Med Javascript, er oppsettet dannes dynamisk når siden lastes i en brukers nettleser.

Bruksanvisning

1 Åpne et tomt tekst eller HTML-dokument og lagre det som \ "tre-kolonne-test.html. \" Javascript kan bygges rett i HTML-koden, som er grunnen til at du lagrer dokumentet med en vanlig HTML forlengelse.

2 Lag den grunnleggende sidestruktur. Siden du gjør en tre-kolonne blogg, lage tre \ "div \" elementer og gi dem hver et navn ved hjelp av \ "id \" attributt. Hele siden bør se omtrent slik ut:

3 Legg Javascript-kode til bunnen av siden, rett før den avsluttende </ body> -koden. Sett opp et sted å skrive koden med \ "script \" og \ "CDATA \" signifikanter:

4 Lag en matrise som inneholder all \ "div \" elementer på siden ved hjelp av \ "getElementsByTagName \" metoden, og den navnet \ "allMyDivs: \"

allMyDivs = document.getElementsByTagName (\ "div \");

5 Lag en løkke for å gå gjennom hver \ "div \" i rekken:

for (var i = 0; i <allMyDivs.length; i ++) {
// Gjøre noe til hver div her //
}

6 Inne i loop, angi stilregler for hver \ "div \" med \ "style \" objekt:

for (var i = 0; i <allMyDivs.length; i ++) {
allMyDivs [i] .style.width = \ "200px \"
GÅ
allMyDivs [i] .style.height = \ "500px \"
GÅ
allMyDivs [i] .style.border = \ "1px solid svart \"
GÅ
allMyDivs [i] .style.cssFloat = \ "venstre \"
GÅ
allMyDivs [i] .style.margin = \ "10px \"
GÅ
}

Disse spesielle reglene vil gjøre hver \ "div \" 200 piksler bred, 500 piksler høy, alle plassert ved siden av hverandre, med 10-pixel marginer.

7 Sett det hele sammen. Hele dokumentstrukturen skal se slik ut:

<Html>
<Head>
<Title> Tre Column Log </ title>
</ Head>
<Body>
<Div id = \ "venstre-kolonne \"> Venstre Sidebar </ div>
<Div id = \ "midt-kolonnen \"> Innholds Goes Her </ div>
<Div id = \ "rett-kolonne \"> Right Sidebar </ div>
<Script type = \ "text / javascript \">
// <! [CDATA [
allMyDivs = document.getElementsByTagName (\ "div \")
GÅ
for (var i = 0; i <allMyDivs.length; i ++) {
allMyDivs [i] .style.width = \ "200px \"
GÅ
allMyDivs [i] .style.height = \ "500px \"
GÅ
allMyDivs [i] .style.border = \ "1px solid svart \"
GÅ
allMyDivs [i] .style.cssFloat = \ "venstre \"
GÅ
allMyDivs [i] .style.margin = \ "10px \"
GÅ
}
//]]>
</ Script>
</ Body>
</ Html>

Lagre filen og åpne den i en nettleser for å se endringene.

8 Legg inn koden for bloggen din og sidebar informasjon i de respektive \ "div \" element.