Come misurare caratteri ASCII Larghezza

July 22

Come misurare caratteri ASCII Larghezza


Il set di caratteri ASCII, creato nel 1960, è costituito da tutti i caratteri che vedi sulla tastiera. Quando agli sviluppatori di creare siti web, che utilizzano questi personaggi per creare il testo che appare nelle pagine Web. Quel testo varia in base alle dimensioni del font utilizzato e la dimensione del carattere. Se l'applicazione ha bisogno di sapere la larghezza di un carattere ASCII, utilizzare il codice HTML "offsetWidth" proprietà per determinare tale valore.

istruzione

1 Creare un nuovo documento HTML o aprirne uno esistente.

2 Aggiungere questo codice alla sezione "corpo" del documento:

<Span id = "piccolo" class = "asciiSmall">

A </ span>

<Input type = valore "pulsante" = "Get Larghezza Small" onclick = "tornare getWidth ( 'piccolo')" />

<Span id = "grande" class = "asciiLarge">

A </ span>

<Input type = valore "pulsante" = "Ottenere larghezza Large" onclick = "return getWidth ( 'grande')" />

Questo crea due tag "span". Il primo fa riferimento a una classe CSS chiamato "asciiSmall." La seconda campata fa riferimento a una classe CSS chiamato "asciiLarge." Un pulsante appare sotto ogni campata. Quel pulsante chiama la funzione JavaScript che ottiene la larghezza della campata. Ogni arco contiene la lettera "A" Cambiamento che a qualsiasi carattere che ti piace.

3 Aggiungere questo codice CSS per la sezione "testa" del documento:

<Style type = "text / css">

.asciiSmall {font-size: 10px;}

.asciiLarge {font-size: 20px;}

</ Style>

La classe "asciiSmall" imposta la dimensione del carattere di qualsiasi elemento che fa riferimento alla classe di 10 pixel. La classe "asciiLarge" imposta a 20 pixel. I due elementi span descritte nei punti 1 e 2 saranno visualizzare tali dimensioni dei caratteri, perché fanno riferimento a queste due classi.

4 Incollare il seguente codice nella sezione del documento "testa" dopo il codice CSS indicato al punto 3:

<Script type = "text / javascript">

Funzione getWidth (objectID) {

var asciiCharacter = document.getElementById (objectID);

var = asciiWidth asciiCharacter.offsetWidth;

alert ( "caratteri ASCII =" + asciiCharacter.innerHTML + "width =" + asciiWidth);

tornare asciiWidth;

}

</ Script>

Questa funzione recupera il "ID" della campata passata da uno dei clic sui pulsanti. E 'quindi recupera proprietà "offsetWidth" della campata. Quella proprietà contiene la larghezza della campata. Perché elementi span contratto per adattare il loro contenuto, il valore "offsetWidth" è uguale alla larghezza del contenuto della campata. Poiché ogni campata contiene la lettera "A", il valore "offsetWidth" contiene il valore della lettera "A"

Consigli e avvertenze

  • È inoltre possibile misurare la larghezza di una stringa di caratteri ASCII, sostituendo la lettera "A" con una stringa di caratteri, frase o un paragrafo.