Hvordan man styrer Margener i en JavaScript

May 15



Website udviklere kan få adgang til skjulte rammer for en webside ved at udnytte JavaScript Document Object Model, eller DOM. JavaScript metoder getElementById () og getElementsByClassName () tillader programmøren at inspicere, ændre og tilføje styling information i HTML. Marginalerne af HTML-tags, såsom "div" eller "p", kan ses eller ændres ved at åbne stil egenskaber margin, marginTop, marginBottom, marginLeft og marginRight. HTML-tags skal være mærket med et ID, før getElementById () metode kan finde dem og ændre deres egenskaber.

Instruktioner

1 Start en standard, almindelig tekst editor såsom Windows Notesblok.

2 Indtast følgende kode i teksteditoren. Generelt bør JavaScript-funktion og style sheets placeres mellem <head> </ head> tags.

<Html>

<Head>

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

/

Formatering for hele dokumentet /

ydre {

background-color: yellow;

}

/ Indledende formatering for div tag /

indre {

bredde: 200 pixel;

height: 80px;

background-color: blue;

farve: hvid;

font-size: 20px;

padding: 10px;

margin-top: 0px;

margin-left: 0px;

}

-> </ Style>

<! - Java script funktionen nedenfor ->

<Script language = "javascript">

funktion changeMargin () {

/ Dette sæt venstre margen af div til 100 pixel venstre i browservinduet grænsen /

. Document.getElementById ( "indre") style.marginLeft = "100px";

/ Dette sæt den øverste margin div til 300 pixels fra toppen af browservinduet grænsen /

. Document.getElementById ( "indre") style.marginTop = "300px";

/ Denne kode ændrer den tekst, der er indeholdt i div til, hvad programmøren ønsker /

. Document.getElementById ( "indre") innerHTML = "Margin ændret til 100px venstre og 300px top";

}

</ Script>

</ Head>

<Body id = "ydre">

<! - Brugeren klikker på teksten i den blå boks. Dette medfører, at funktionen changeMargin () for at udføre. Denne div får ID "indre" brug for getElementById () ->

<Div id = "indre" onClick = "changeMargin ()"> Klik i blå boksen for at ændre top og venstre margener </ div>

</ Body>

</ Html>

3 Gem HTML-koden under filnavnet "test.html."

4 Start Internet Explorer. Klik på menuen "Filer", og vælg "Åbn fil".

5 Find filen "test.html." Vælg den med musen, og klik derefter på "Åbn".

6 Klik på teksten i den blå baggrund med musen for at ændre box venstre og øverste margen.

TIPS

  • Både JavaScript-funktion kalder "getElementById ()" og "getElementsByName ()" kan få adgang og manipulere HTML DOM elementer. Den getElementById () metode kan få på HTML-elementer direkte, mens "getElementsByName ()" tilføjer at programmere kompleksitet ved kun at tillade indirekte adgang selvom et array med alle det mærkede taggets elementer. Endvidere mens alle HTML-tags kan mærkes med et ID, ikke alle kan være mærket med et navn.
  • De store webbrowsere vil vise CSS marginer og padding forskelligt. Selv forskellige versioner af samme browser kan give uventede display spørgsmål. Test altid din kode på forskellige browsere og ældre versioner af samme browser, for at sikre koden virker som forventet.

relaterede artikler