Cómo cambiar el tamaño de la fuente con JavaScript?

aprender: Cómo cambiar el tamaño de fuente del texto HTM uso de JavaScript ? Tamaño de la fuente en una página web puede tener un aspecto hermoso, pero no sirve de nada cuando alguien con problema en el ojo no puede leerlo. Pero con JavaScript, podemos eliminar este problema aumentando de forma manual / disminuir el tamaño de fuente.

El lenguaje de programación de web puede ser utilizado class interacciones de inmersión en el sitio web, pero lo que lo hace más especial es la capacidad de alterar página HTML para que sea for diferentes usuarios accesibles.

Tamaño de la fuente en una página web puede tener un aspecto hermoso, pero no sirve de nada cuando alguien con problema en el ojo no puede leerlo. Pero con JavaScript, podemos eliminar este problema aumentando de forma manual / disminuir el tamaño de fuente.

Supongamos que este es nuestro HTML,

<p id="para">This is an example of font-sizing with JavaScript</p>
<btn id="dec"> A- </btn>
<btn id="inc"> A+ </btn>

Aquí, párrafo es el id del párrafo o texto cuyo tamaño de fuente que tenemos que cambiar. Los dos botones, A- y A + también tienen respectivos identificadores y que se pueden utilizar para controlar la tamaño de fuente . Ahora, el tiempo for algunos de Java Scripting.

var text = document.getElementById('para');
var btn-dec = document.getElementById('dec');
var btn-inc = document.getElementById('inc');
var size = 16; //Default
btn-dec.addEventListener('click', function() {
text.style.fontSize = size-- + 'px';
});
btn-inc.addEventListener('click', function() {
text.style.fontSize = size++ + 'px';
});

Aquí tomamos 3 variables para obtener los elementos por sus identificadores. A continuación, añadimos dos detectores de eventos en los botones, que ejecutará la función de devolución de llamada si se registran los clics en ellos. A continuación tomamos tamaño variable que será el valor del tamaño.

La parte class viene aquí, el text.style.fontSize accesos al font-size propiedad del elemento de texto y lo disminuye. El tamaño ++ aumenta el tamaño de fuente y concatena con px como una cadena. Del mismo modo class aumentar el tamaño, incrementar el tamaño de fuente . Y eso es. Fácil y limpia.

Si te gusta este artículo, háganoslo saber a través de los comentarios.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *