Cambiar el tamaño de Fuente (Texto) mediante Botones con jQuery 3.5.1

jQuery | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

En algunas ocasiones necesitamos queremos crear en los usuarios una buena experiencia, para hacer esto debemos trabajar en muchos aspectos de un sitio web, uno de estos aspectos es quizás el tamaño de la fuente, pensemos por un momento que hay usuarios que pueden ser cortos de vista o no pueden ver bien el texto del sitio web, para solucionar esto, podemos brindarles unos botones para disminuir o agrandar el texto, de esta manera se sentirán más cómodos durante la estadía de un sitio web, vamos a crear este funcionalidad con jQuery.

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify SoundCloud

Bien ahora continuemos con el Post: Cambiar el tamaño de Fuente (Texto) mediante Botones con jQuery 3.5.1 

Vista HTML

Lo primero que agregaré a mi vista serán 3 botones, uno para disminuir el tamaño del texto, otro para aumentar el tamaño del texto y otro para restablecer el tamaño de fuente, asimismo agregaré un un párrafo p en donde aparecerá el tamaño actual del texto.

Luego agregaré un par de párrafos con una imagen, los párrafos contienen el texto que utilizaré para disminuir o agrandar en el sitio web, a estos párrafos le he puesto el nombre de clase mitexto.

Si voy al navegador mi vista HTML se debe de ver de la siguiente manera.

Ahora pasemos a trabajar en el código jQuery.

Código jQuery

Lo primero que haré es definir un tamaño de fuente inicial de 16 px dentro de una función que le daré de nombre tamañoLetra(), este tamaño de fuente inicial se mostrará al cargar la página.

En la vista HTML agregué 3 botones a los cuales le agregue de nombre de clase disminuir, aumentar y restablecer. Cuando hago clic en uno de los botones, se ejecuta el código respectivo para realizar la determinada funcionalidad. (En el código he colocado comentarios para explicar que hace cada porción de código). 

Asimismo, cuando cambie de tamaño de la fuente, el nuevo tamaño se mostrará en el elemento <span> con nombre de clase tamaño-actual que se encuentra debajo de los botones en la vista HTML. 

He puesto un límite de tamaño mínimo de 14 px y un límite máximo de 47 px, tu puedes personalizarlo con los límites que desees.

Bueno eso es todo, al inicio he colocado una Demo con el código fuente alojado en un repositorio de GitHub.

Conclusión

Podemos ver que con jQuery podemos mejorar la experiencia de los usuarios que visitan un sitio web, agregando diferentes herramientas y funcionalidades para que los usuarios puedan usarlas al visitar un sitio web.

Nota (s)

  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments