El código para cambiar el tamaño de fuente en HTML usando Porcentaje

Los navegadores modernos permiten a los internautas poder ajustar sus tamaños de fuente utilizando los controles del navegador. Algunos usuarios con problemas de visión, por ejemplo, pueden utilizar estos controles para hacer el texto más grande. Otros podrían preferir fuentes más pequeñas que les permiten encajar más texto en la pantalla. Sus aplicaciones web también tienen la capacidad de cambiar las fuentes HTML en una página. El uso de JavaScript, se puede aumentar y disminuir el tamaño de la fuente por cualquier porcentaje que te gusta.

Instrucciones

1 Lanzar su editor HTML y crear un nuevo documento.

2 Pegar el código que se muestra a continuación en la sección del cuerpo del documento:

<Div id = "div1">

Esto es un texto

</ Div>

<Id de entrada = "Button1" type = "button" value = "Disminuir a 50 por ciento del tamaño normal" onclick = "return changeSize ( 'div1', 50 ')" />

<Input id = type = "button" valor "Button2" = "Aumenta el tamaño del 150 por ciento del tamaño normal" onclick = "return changeSize ( 'div1', 150 ')" />

En este ejemplo se crea un elemento div que contiene el texto. Identificación del valor de este elemento es "div1." Dos botones aparecen debajo de la div. Cada botón se llama a la función JavaScript "changeSize" y se lo pasa el valor id del div y un número. El primer botón pasa 50 a la función. Esto indica a la función de cambiar el tamaño del texto a 50 por ciento de su tamaño normal. El segundo botón pasa a 150. La función de, al recibir ese valor, aumenta el tamaño del texto de la div a 150 por ciento de su valor normal.

3 Agregue este código a la sección de la cabeza del documento:

función changeSize (elementToChange, newSize) {

var element = document.getElementById (elementToChange);

tamaño var = newSize + "%";

element.style.fontSize = tamaño;

}

Esta es la función "changeSize". Se recupera una referencia al elemento div y lo almacena en la variable llamada "elemento. La última línea de código cambia el elemento de" valor style.fontSize "al valor pasado a la función.

4 Guarde el documento y verlo en su navegador. El texto aparece encima de los dos botones.

5 Haga clic en el "Disminuir a 50 por ciento del tamaño normal" botón. El código JavaScript se ejecuta y disminuye el tamaño del texto a 50 por ciento.

6 Haga clic en el "Aumento de tamaño de 150 por ciento del tamaño normal" botón. El código aumenta el tamaño del texto a 150 por ciento de su valor normal.

Consejos y advertencias

• Usted no tiene que utilizar los botones para cambiar el tamaño del texto. Su aplicación puede cambiar el tamaño del texto en cualquier momento llamando a la función changeSize y pasándolo id del elemento que desea cambiar y el valor porcentual deseado. Por ejemplo, supongamos que su página Web tiene un elemento cuyo ID es "prueba". Para aumentar su tamaño del texto en un 300 por ciento, emitir la siguiente declaración: changeSize ( "test", "300").