Hvordan redusere skriftstørrelsen på en knapp med Javascript

Knapper er standard HTML-elementer som er opprettet med innspill tag. Knappene har et ensartet utseende som passer til måten knapper vises i brukerens operativsystem. Cascading Style Sheets, eller CSS, kontrollere visuelle egenskaper som skriftstørrelsen på knappene på websidene. Bruk Javascript-kode for å justere CSS egenskaper på fly og endre skriftstørrelsen på en knapp etter at siden er gjengitt.

Bruksanvisning

1 Plasser følgende kode mellom hodet kodene i HTML-dokumentet:

<Script type = "text / javascript">

funksjon setFontSize (id, størrelse) {

document.getElementById(id).style.fontSize = size;

}

</ Script>

2 Plasser følgende kode i kroppen av HTML-dokument:

<Input type = "button" value = "Klikk for å redusere Font Size" id = "b1" onclick = "setFontSize ( 'b1', '75%');" />

Denne knappen vil redusere sin egen skriftstørrelsen når den klikkes. Du kan bruke en prosent av standard skriftstørrelse, som i eksemplet, eller kan bruke en pikselverdi som "10px" når du kaller funksjonen. Funksjonen kan kalles fra andre steder; identifisere knappen for å bli endret ved sin id attributt. Hver id-verdien må være unik for en knapp.

3 Plasser følgende funksjon mellom skriptkodene i hodet av dokumentet:

funksjons setAllButtonFontSizes (størrelse) {

var n = document.getElementsByTagName("input");

for (var i = 0; i & lt; n.length, jeg ++) {

if (n [i] .type == "knapp") {

n [i] .style.fontSize = størrelse;

}

}

}

Denne funksjonen endrer skriftstørrelser på alle knappene samtidig. Som før, kan du bruke en prosent eller pikselverdi for størrelsen.

4 Legg til følgende til legemet av dokumentet for å tillate brukeren å justere størrelsen av knappene:

<Velg onChange = "setAllButtonFontSizes (this.options [this.options.selectedIndex] .Value);">

<Alternativ> Velg en knapp Font Size: </ option>

<Option value = "12px"> Vanlig </ option>

<Option value = "10px"> Medium </ option>

<Option value = "8 piksler"> Små </ option>

</ Velge>