I pulsanti sono elementi HTML standard creati con il tag input. I pulsanti hanno un aspetto uniforme che è adatto al modo in cui vengono visualizzati i pulsanti sistema operativo dell'utente. Cascading Style Sheets, o CSS, controllo proprietà visive come ad esempio la dimensione del carattere dei pulsanti sulle tue pagine web. Usa il codice JavaScript per regolare le proprietà CSS al volo e cambiare la dimensione del carattere di un tasto dopo che la pagina viene visualizzata.

istruzione

1 Inserire il codice seguente tra i tag head del documento HTML:

<Script type = "text / javascript">

Funzione SetFontSize (id, dimensioni) {

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

}

</ Script>

2 Inserire il codice seguente nel corpo del documento HTML:

<Input type = valore "pulsante" = "Clicca per Ridurre Dimensione carattere" id = "b1" onclick = "SetFontSize ( 'b1', '75%');" />

Questo pulsante consentirà di ridurre la propria dimensione di carattere quando si fa clic. È possibile utilizzare una percentuale della dimensione del font di default, come nell'esempio, o possibile utilizzare un valore di pixel come "10px" quando si chiama la funzione. La funzione può essere chiamata da altrove; identificare il pulsante da modificare dal suo attributo id. Ogni valore id deve essere univoco a un pulsante.

3 Posizionare la seguente funzione tra i tag script nella testa del documento:

setAllButtonFontSizes funzione (size) {

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

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

se ( "tasto" n [i] .type ==) {

n [i] = .style.fontSize dimensioni;

}

}

}

Questa funzione cambia le dimensioni dei caratteri di tutti i pulsanti in una sola volta. Come in precedenza, utilizzare una percentuale o valore in pixel per le dimensioni.

4 Aggiungere il seguente al corpo del documento per consentire all'utente di regolare la dimensione dei pulsanti:

<Select onChange = "setAllButtonFontSizes (this.options [this.options.selectedIndex] .value);">

<Option> selezionare un pulsante Dimensione carattere: </ option>

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

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

<Option value = "8px"> Piccolo </ option>

</ Select>