Koden for å endre skriftstørrelsen i HTML Bruke Prosent

Moderne nettlesere lar Internett-surfere til å finpusse sine skriftstørrelser ved hjelp av nettleseren kontroller. Noen brukere med synsproblemer, for eksempel, kan bruke disse kontrollene for å gjøre teksten større. Andre foretrekker kanskje mindre skrifttype som tillater dem å passe mer tekst på skjermen. Web-applikasjoner har også muligheten til å endre HTML-skrifter på en side. Ved hjelp av Javascript, kan du øke og redusere skriftstørrelsen med noen prosentandel du vil.

Bruksanvisning

1 Start din HTML editor og opprette et nytt dokument.

2 Lim inn koden vist nedenfor i dokumentets hoveddel:

<Div id = "div1">

Dette er litt tekst

</ Div>

<Input id = "Button1" type = "button" value = "Reduser størrelse til 50 prosent av normal størrelse" onclick = "return changeSize ( 'div1', 50)" />

<Input id = "Button2" type = "button" value = "Øke størrelse til 150 prosent av normal størrelse" onclick = "return changeSize ( 'div1', 150)" />

Dette eksemplet oppretter en div-elementet som inneholder tekst. Dette elementet er id verdien er "div1." To knapper vises under div. Hver knapp kaller "changeSize" Javascript-funksjonen og sender den div id verdi og et tall. Den første knapp 50 passerer til funksjonen. Som forteller funksjonen for å endre tekstens størrelse til 50 prosent av normal størrelse. Den andre knappen passerer 150. Funksjonen, når du mottar denne verdien, øker div tekst størrelse til 150 prosent av normal verdi.

3 Legg denne koden til dokumentets hodedelen:

funksjon changeSize (elementToChange, newSize) {

Var element = document.getElementById (elementToChange);

Var size = newSize + "%";

element.style.fontSize = størrelse;

}

Dette er den "changeSize" -funksjon. Den henter en referanse til div-elementet og lagrer den i variabelen som heter "element. Den siste linjen med kode endrer elementets" style.fontSize "verdi til verdien sendes til funksjonen.

4 Lagre dokumentet og vise den i nettleseren din. Teksten vises over to knapper.

5 Klikk på "Reduser størrelse til 50 prosent av normal størrelse" -knappen. Javascript-koden kjøres og reduserer tekststørrelsen til 50 prosent.

6 Klikk på "Øke størrelse til 150 prosent av normal størrelse" -knappen. Koden øker tekststørrelsen til 150 prosent av normal verdi.

Hint

• Du trenger ikke å bruke knappene til å endre tekststørrelsen. Søknaden kan endre tekststørrelsen når som helst ved å ringe changeSize funksjon og passerer den id av elementet du vil endre, og ønsket prosentverdi. For eksempel anta at websiden har et element som har id er "test". For å øke tekststørrelsen med 300 prosent, avgi følgende uttalelse: changeSize ( "test", "300").