January 26
Gli sviluppatori Web cambiano proprietà dei font di testo sito modificando i valori foglio di stile dell'oggetto testo quando gli spettatori eseguire un'azione su una pagina web. Ad esempio, se un sito ha un pulsante che dice, "Clicca per aumentare dimensione del carattere", cliccando il pulsante chiama una funzione JavaScript. Tale funzione cambia la dimensione del carattere di un oggetto di testo, aggiornando proprietà dimensione del carattere dell'oggetto. Utilizzare questa tecnica per aggiungere effetti di testo a un sito web e consentire agli spettatori di personalizzare il testo in base alle loro esigenze.
1 Aprire il Blocco note, creare un nuovo documento e aggiungere il seguente testo ad esso:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Font test di cambiamento </ title>
<! - Sezione head del documento ->
<Script type = "text / javascript">
// SCRIPT sezione del documento ->
</ Script>
</ Head>
<Body>
<! - Sezione corpo del documento ->
</ Body>
</ Html>
2 Aggiungere il seguente codice alla sezione <body> del documento "sezione del corpo del documento" qui sotto:
<Input type = valore "pulsante" = "Regular" onclick = "changeFont ( 'paragrafo 1', 'regularFont')" />
<Input type = valore "pulsante" = "Grande carattere" onclick = "changeFont ( 'paragrafo 1', 'largeFont')" />
<Input type = valore "pulsante" = "Small Font" onclick = "changeFont ( 'paragrafo 1', 'smallFont')" />
<Div>
<P id = "paragrafo 1" class = "regularFont"> Questo è un paragrafo. Fare clic su un pulsante per ridimensionarla. </ P>
</ Div>
Questo crea un paragrafo e tre pulsanti che chiamano la funzione JavaScript che cambia la dimensione del carattere del paragrafo. evento "onclick" di ciascun pulsante passa il nome di una classe diversa. Ogni stili di classe il paragrafo secondo la definizione della classe 'foglio di stile.
3 Aggiungere questo codice alla sezione <head> del documento "sezione HEAD del documento" qui sotto:
<Style type = "text / css">
.regularFont {font-size: 12px;}
.smallFont {font-size: 8px;}
.largeFont {font-size: 24px;}
</ Style>
Queste classi Style Sheet definiscono formati normali, piccoli e grandi caratteri. I valori sono espressi in pixel. La classe "largeFont" definisce una dimensione del carattere di 24 pixel. Modificare queste dimensioni dei pixel di tutti i valori che ti piace. Ad esempio, per modificare la dimensione del carattere di classe "largeFont" per 20 pixel, modificare l'istruzione nel modo seguente:
.largeFont {font-size: 20px;}
4 Aggiungere questa funzione JavaScript per il <script> sezione del documento "sezione dello script del documento" qui sotto:
Funzione changeFont (objectReference, newClassName) {
var objectToChange = document.getElementById (objectReference);
objectToChange.className = newClassName;
}
Ogni pulsante nella sezione <body> chiama questa funzione e passa due parametri alla funzione: il nome dell'oggetto per cambiare e il nome della classe da applicare all'oggetto. In questo esempio, il pulsante "Grande carattere" passa "paragrafo 1" come "objectToChange" e "largeFont", come il nome della classe da applicare al "paragrafo 1". La seconda dichiarazione nella funzione si applica la classe "largeFont" a "paragrafo 1". Dal momento che la classe "largeFont" definisce una dimensione di 24 pixel del carattere (24px), la dimensione del carattere di cambiamenti "paragrafo 1" a 24 pixel.
5 Fai clic su "File" e selezionare "Salva" per aprire la "Salva con nome" finestra. Immettere quanto segue nella casella "Nome file":
xyz.html
Sostituire "xyz" con qualsiasi nome. Ad esempio, se si vuole dare un nome alla pagina web "MyPage," entrare "mypage.html" (senza le virgolette) nella casella di testo.
6 Fai clic su "Salva" per salvare il file. Aprire in un browser e fare clic sui pulsanti. Ogni pulsante cambierà le dimensioni del testo nel paragrafo.