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 < 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 >