Nwlapcug.com


Come si cambia dimensione del carattere su volare con fogli di stile?

Gli sviluppatori Web modificano proprietà font del testo del sito Web modificando i valori del 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, "Fare clic su per aumentare la dimensione del carattere," facendo clic su tale pulsante chiama una funzione JavaScript. Tale funzione cambia dimensione del carattere di un oggetto di testo mediante l'aggiornamento di proprietà di dimensione dell'oggetto font. Utilizzare questa tecnica per aggiungere effetti di testo a un sito Web e consentire agli spettatori di personalizzare il testo secondo le proprie esigenze.

Istruzioni

1

Aprire il blocco note, creare un nuovo documento e aggiungere il seguente testo:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN" "l'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns = "l'http://www.w3.org/1999/xhtml" >

< head >

< title > Font cambia Test < / title >

<!-- sezione HEAD del documento... >

< script type = "text/javascript" >

Sezione SCRIPT del documento-->

< / script >

< / head >

< corpo >

<!-- sezione BODY del documento... >

< / body >

< / html >

2

Aggiungere il seguente codice alla sezione < body > del documento sotto "Sezione BODY del documento":

< input type = valore "pulsante" = "Font normale" onclick = "changeFont (paragrafo ' 1', 'regularFont')" / >

< input type = "button" valore = "Caratteri grandi" onclick = "changeFont (paragrafo ' 1', 'largeFont')" / >

< input type = valore "pulsante" = "Font piccolo" onclick = "changeFont (paragrafo ' 1', 'smallFont')" / >

< div >

< id p = "paragrafo 1" class = "regularFont" > questo è un paragrafo. Fare clic su un pulsante per ridimensionare it. </p >

< / div >

Questo crea un paragrafo e tre pulsanti che chiamano la funzione JavaScript che cambia dimensione del carattere del paragrafo. Evento "onclick" di ciascun pulsante passa il nome di una classe diversa. Ogni classe gli stili del paragrafo secondo la definizione di foglio di stile della classe.

3

Aggiungere questo codice alla sezione < head > del documento sotto "Sezione HEAD del documento":

< style type = "text/css" >

.regularFont {font-size: 12px;}

.smallFont {font-size: 8px;}

.largeFont {font-size: 24px;}

< / stile >

Queste classi del foglio di stile per definire font regolari, piccole e grandi dimensioni. I valori sono in pixel. La classe "largeFont" definisce una dimensione di 24 pixel. Modificare queste dimensioni di pixel per tutti i valori che ti piace. Ad esempio, per modificare la dimensione del carattere della classe "largeFont" a 20 pixel, modificare l'istruzione come segue:

.largeFont {font-size: 20px;}

4

Aggiungere questa funzione JavaScript alla sezione < script > del documento sotto "Sezione SCRIPT del documento":

Function 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 da modificare e il nome della classe da applicare all'oggetto. In questo esempio, il pulsante di "Caratteri grandi" passa "paragrafo 1" come "objectToChange" e "largeFont" come il nome della classe da applicare al paragrafo "1." La seconda istruzione nella funzione applica la classe "largeFont" al paragrafo "1." Poiché la classe "largeFont" definisce una dimensione di carattere di 24 pixel (24px), la dimensione del carattere del paragrafo "1" cambia a 24 pixel.

5

Fare clic su "File" e selezionare "Salva" per aprire la finestra "Salva con nome". Immettere quanto segue nella casella "Nome File":

XYZ.html

Sostituire "xyz" con qualsiasi nome. Ad esempio, se si desidera denominare la pagina web "MyPage", immettere "MyPage" (senza virgolette) nella casella di testo.

6

Fare clic su "Salva" per salvare il file. Aprirlo in un browser e fare clic sui pulsanti. Ogni pulsante cambierà la dimensione del testo nel paragrafo.

Consigli & Avvertenze

  • Aggiungere sempre una proprietà ID a qualsiasi oggetto HTML che si desidera JavaScript per modificare. Il comando di "Document. getElementById" utilizza l'ID per rendere l'oggetto visibile nel codice JavaScript.