Nwlapcug.com


Come ridurre la dimensione del carattere su un pulsante con Javascript



I pulsanti sono elementi HTML standard creati con il tag di input. I pulsanti hanno un aspetto uniforme che si adatta al modo in cui i pulsanti vengono visualizzati nel sistema operativo dell'utente. Proprietà visive controllo CSS fogli di stile o CSS, ad esempio la dimensione del carattere dei pulsanti sulle tue pagine Web. Utilizzare codice JavaScript per regolare le proprietà CSS in tempo reale e modificare la dimensione del carattere di un tasto dopo il rendering della pagina.

Istruzioni

1

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

< script type = "text/javascript" >

Function setFontSize(id,size) () {

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

}

< / script >

2

Inserire il codice seguente nel corpo del documento HTML:

< tipo input = "pulsante" value = "Clicca per ridurre la dimensione del carattere" id = "b1" onClick="setFontSize('b1','75%');" / >

Questo pulsante riduce la propria dimensione di carattere quando cliccato. È possibile utilizzare una percentuale della dimensione del carattere predefinito, come nell'esempio, o può 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 relativo attributo id. Ogni valore di id deve essere univoco a un pulsante.

3

Inserire la funzione seguente tra i tag script nella sezione head del documento:

Function setAllButtonFontSizes(size) () {

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

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

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

n[i].style.fontSize = size;

}

}

}

Questa funzione cambia le dimensioni dei caratteri di tutti i pulsanti contemporaneamente. Come prima, è possibile utilizzare un valore percentuale o pixel per la dimensione.

4

Aggiungere quanto segue al corpo del documento per consentire all'utente di regolare la dimensione dei pulsanti:

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

< opzione > Seleziona una dimensione di carattere pulsante: < / option >

< valore opzione = "12px" > regolari < / option >

< valore opzione = "10px" > Medium < / option >

< valore opzione = "8px" > piccolo < / option >

< / selezionare >