Cómo medir el ancho de caracteres ASCII

El juego de caracteres ASCII, creada en la década de 1960, se compone de todos los caracteres que ve en su teclado. Cuando los desarrolladores a crear sitios web, que utilizan estos caracteres para crear el texto que aparece en las páginas Web. Ese texto varía en tamaño de acuerdo a la fuente utilizada y el tamaño de la fuente. Si su aplicación necesita saber el ancho de un carácter ASCII, utilice el código HTML "offsetWidth" propiedad para determinar ese valor.

Instrucciones

1 Crear un nuevo documento HTML o abrir uno existente.

2 Agregue este código a la sección "cuerpo" del documento:

<Span id = clase "pequeña" = "asciiSmall">

A </ span>

<Input type = "button" value = "Obtener Ancho Pequeño" onclick = "return getWidth (" pequeño ")" />

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

A </ span>

<Input type = "button" value = "Obtener Ancho grande" onclick = "return getWidth (" grande ")" />

Esto crea dos etiquetas "span". La primera de ellas hace referencia a una clase CSS llamada "asciiSmall." El segundo período de referencia a una clase CSS llamada "asciiLarge." Aparece un botón debajo de cada tramo. Ese botón llama a la función JavaScript que recibe el ancho del tramo. Cada tramo contiene la letra "A" Cambiar eso a cualquier personaje que te gusta.

3 Añadir el código CSS a la sección "cabeza" del documento:

<Style type = "text / css">

.asciiSmall {font-size: 10px;}

.asciiLarge {font-size: 20px;}

</ Style>

La clase "asciiSmall" ajusta el tamaño de la fuente de cualquier elemento que hace referencia a la clase de 10 píxeles. La clase "asciiLarge" lo establece en 20 píxeles. Los dos elementos span describen en los pasos 1 y 2 se mostrarán los tamaños de fuente, ya que hacen referencia a estas dos clases.

4 Pega el siguiente código en la sección "cabeza" del documento después de que el código CSS se muestra en el paso 3:

<Script type = "text / javascript">

función getWidth (IDobjeto) {

var asciiCharacter = document.getElementById (IDobjeto);

var = asciiWidth asciiCharacter.offsetWidth;

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

asciiWidth regresar;

}

</ Script>

Esta función recupera el "ID" del tramo aprobado por una de las pulsaciones de botón. A continuación, recupera la propiedad "offsetWidth" del tramo. Esa propiedad contiene el ancho del tramo. Debido elementos span contrato para adaptarse a su contenido, el valor "offsetWidth" es igual a la anchura de los contenidos del palmo. Puesto que cada tramo contiene la letra "A", el valor "offsetWidth" contiene el valor de la letra "A"

Consejos y advertencias

• También se puede medir el ancho de una cadena de caracteres ASCII mediante la sustitución de la letra "A" con una cadena de caracteres, frase o párrafo.