Hvordan kan jeg endre skriftstørrelse gjør på fly med stilark?

October 25

Webutviklere endre skriftegenskaper av nettstedet tekst ved å endre teksten objektets Style Sheet verdier når seerne utføre en handling på en nettside. For eksempel, hvis et område har en knapp som sier "Klikk for å øke skriftstørrelsen," klikke den knappen kaller en Javascript-funksjon. At funksjonen endrer en tekst objektets skriftstørrelsen ved å oppdatere objektets skriftstørrelsen eiendom. Bruk denne teknikken til å legge til tekst effekter til et nettsted og aktivere seerne til å tilpasse tekst i henhold til deres behov.

Bruksanvisning

1 Åpne Notisblokk, opprette et nytt dokument og legge til følgende tekst til det:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Head>

<Title> Font Endre Test </ title>

<! - HEAD delen av dokumentet ->

// SCRIPT delen av dokumentet ->

</ Script>

</ Head>

<Body>

<! - BODY delen av dokumentet ->

</ Body>

</ Html>

2 Legg til følgende kode i <body> -delen av dokumentet under "BODY delen av dokumentet":

<Div>

<P id = "PARAGRAPH1" class = "regularFont"> Dette er et avsnitt. Klikk på en knapp for å endre størrelsen. </ P>

</ Div>

Dette skaper et avsnitt og tre knapper som kaller Javascript-funksjonen som endrer avsnittet skriftstørrelse. Hver knapp er "onclick" event passerer navnet på en annen klasse. Hver klasse stiler Avsnitts henhold til klassen "Style Sheet definisjon.

3 Legg denne koden i <head> -delen av dokumentet under "HEAD-delen av dokumentet":

.regularFont {font-size: 12px;}

.smallFont {font-size: 8px;}

.largeFont {font-size: 24px;}

</ Style>

Disse stilark klasser definere vanlige, små og store skriftstørrelser. Verdiene er i piksler. Den "largeFont" klasse definerer en skriftstørrelse på 24 piksler. Endre disse pikselstørrelser til eventuelle verdier som du liker. For eksempel, for å endre skriftstørrelsen på "largeFont" klasse til 20 piksler, endre uttalelsen til å lyde som følger:

.largeFont {font-size: 20px;}

4 Legg til Javascript-funksjonen til <script> -delen av dokumentet under "script delen av dokumentet":

funksjon changeFont (objectReference, newClassName) {

Var objectToChange = document.getElementById (objectReference);

objectToChange.className = newClassName;

}

Hver knapp i <body> -delen kaller denne funksjonen og passerer to parametre til funksjonen: navnet på objektet for å endre og navnet på klassen som skal brukes på objektet. I dette eksemplet passerer "Large Skrift" knapp "PARAGRAPH1" som "objectToChange" og "largeFont" som navnet på klassen til å gjelde "PARAGRAPH1." Den andre setningen i funksjonen gjelder "largeFont" klasse til "PARAGRAPH1." Siden "largeFont" class definerer en 24 pixel skriftstørrelse (24px), skriftstørrelsen "PARAGRAPH1" endres til 24 piksler.

5 Klikk på "File" og velg "Lagre" for å åpne "Lagre som" -vinduet. Skriv inn følgende i "File Name":

xyz.html

Erstatt "xyz" med noen navn. For eksempel, hvis du ønsker å navngi websiden "MinSide," enter "minside.html" (uten anførselstegn) i tekstboksen.

6 Klikk "Lagre" for å lagre filen. Åpne den i en nettleser og klikke på knappene. Hver knapp vil endre størrelsen på teksten i avsnittet.

Hint

Alltid legge en ID egenskapen til noen HTML objektet du vil Javascript for å endre. Den "document.getElementById" kommandoen bruker-ID for å gjøre objektet synlig i Javascript-kode.