Il set di caratteri ASCII, creato nel 1960, è costituito da tutti i caratteri che vedete sulla vostra tastiera. Quando gli sviluppatori di costruire siti Web, usano questi caratteri per creare il testo visualizzato nelle pagine Web. Quel testo varia in dimensione secondo il tipo di carattere utilizzato e la dimensione del carattere. Se l'applicazione deve sapere la larghezza di un carattere ASCII, è possibile utilizzare la proprietà di "offsetWidth" HTML per determinare tale valore.

Istruzioni

1

Creare un nuovo documento HTML o aprirne uno esistente.

2

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

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

A < / span >

< tipo input = "pulsante" value = "Ottenere larghezza piccola" onclick = "return getWidth('small')" / >

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

A < / span >

< tipo input = "pulsante" value = "Ottenere larghezza grande" onclick = "return getWidth('large')" / >

Questo crea due tag "span". Il primo si fa riferimento a una classe CSS denominata "asciiSmall." La seconda campata fa riferimento a una classe CSS denominata "asciiLarge." Viene visualizzato un pulsante sotto ogni campata. Tale pulsante chiama la funzione JavaScript che ottiene la larghezza di. Ogni campata contiene la lettera "a". Cambiare la situazione a qualsiasi carattere che ti piace.

3

Aggiungere questo codice CSS alla sezione "head" del documento:

< style type = "text/css" >

.asciiSmall {font-size: 10px;}

.asciiLarge {font-size: 20px;}

< / stile >

La classe "asciiSmall" imposta la dimensione del carattere di qualsiasi elemento che fa riferimento alla classe a 10 pixel. La classe "asciiLarge" impostato su 20 pixel. I due elementi span descritti nei passaggi 1 e 2 visualizzerà tali dimensioni di carattere, perché fanno riferimento a queste due classi.

4

Incollare il codice riportato di seguito nella sezione "head" del documento dopo il codice CSS illustrato nel passaggio 3:

< script type = "text/javascript" >

Function getWidth(objectID) () {

var asciiCharacter = document.getElementById(objectID);

var asciiWidth = asciiCharacter.offsetWidth;

Alert ("carattere ASCII =" + asciiCharacter.innerHTML + "Width =" + asciiWidth);

Return asciiWidth;

}

< / script >

Questa funzione recupera il "ID" dell'intervallo passato da uno dei clic pulsante. Recupera quindi proprietà di "offsetWidth" di arco. Tale proprietà contiene la larghezza di. Perché span elementi contraggono per adattarsi al contenuto, il valore di "offsetWidth" è uguale alla larghezza del contenuto di span. Poiché ogni campata contiene la lettera "A", il valore di "offsetWidth" contiene il valore della lettera "a".

Consigli & Avvertenze

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