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

Nube Colectiva

hace 4 años

En esta página:

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.


<!-- Botones --> 
<div class="btn-toolbar justify-content-center" role="toolbar" aria-label="Botones">
    <button type="button" class="disminuir btn btn-dark mr-1">Disminuir</button>
    <button type="button" class="aumentar btn btn-dark mr-1">Aumentar</button>
    <button type="button" class="restablecer btn btn-danger">Restablecer</button>
</div>

<!-- Tamaño actual del texto (fuente) --> 
<p class="mt-3">Tamaño actual: <span class="tamaño-actual"></span></p>

<button type="button" class="disminuir btn btn-dark mr-1">Disminuir</button>

<button type="button" class="aumentar btn btn-dark mr-1">Aumentar</button>

<button type="button" class="restablecer btn btn-danger">Restablecer</button>

</div>

<p class="mt-3">Tamaño actual: <span class="tamaño-actual"></span></p>

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.


<p class="mitexto">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ligula egestas, dictum magna quis, consequat nisl. Donec elementum augue sed vulputate bibendum. Sed vulputate enim eget eros ultrices interdum. Ut sed purus a
    ligula vulputate feugiat. Donec ac aliquet eros, at porttitor urna. Maecenas eu dui a urna porttitor hendrerit vitae vel ipsum. Donec eros urna, laoreet vel volutpat sit amet, commodo quis ligula. Vivamus euismod sapien porta nibh
    facilisis, eu blandit eros aliquam. Aliquam dapibus tempus orci sit amet commodo. Quisque accumsan mollis libero quis gravida. Nullam blandit tempor elit.
</p>

<p>
    <a
        href="https://blog.nubecolectiva.com/como-convertir-el-contenido-de-un-div-a-imagen-en-angular-10/"
        target="_blank"
        title="Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1"
        alt="Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1"
    >
        <img
            src="https://blog.nubecolectiva.com/wp-content/uploads/2020/07/aimg_destacada_blog_devs-2-930x360.png"
            class="img-fluid"
            title="Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1"
            alt="Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1"
        />
    </a>
</p>

<p class="mitexto">
    Integer nisi justo, faucibus at ultricies in, mattis eget leo. Morbi nec erat bibendum, aliquet quam eget, bibendum sapien. Curabitur ac risus vulputate lectus dignissim venenatis. Ut ac erat convallis metus maximus sollicitudin. Fusce
    ut dui arcu. Proin lacinia velit ac ligula dapibus, quis venenatis dui volutpat. Nullam rhoncus erat sit amet placerat mattis. Vestibulum gravida pellentesque magna non viverra. Suspendisse suscipit turpis ut turpis rutrum semper.
    Quisque vitae luctus neque, quis vulputate massa. Aliquam vestibulum aliquam consectetur. Mauris ut nibh a dolor viverra luctus. Nam et erat viverra, rutrum quam eget, suscipit quam. Mauris a euismod libero. Aliquam eu odio vel sapien
    pellentesque elementum. Curabitur purus sapien, aliquam eget eros at, viverra viverra lorem.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac ligula egestas, dictum magna quis, consequat nisl. Donec elementum augue sed vulputate bibendum. Sed vulputate enim eget eros ultrices interdum. Ut sed purus a

ligula vulputate feugiat. Donec ac aliquet eros, at porttitor urna. Maecenas eu dui a urna porttitor hendrerit vitae vel ipsum. Donec eros urna, laoreet vel volutpat sit amet, commodo quis ligula. Vivamus euismod sapien porta nibh

facilisis, eu blandit eros aliquam. Aliquam dapibus tempus orci sit amet commodo. Quisque accumsan mollis libero quis gravida. Nullam blandit tempor elit.

</p>

<p>

href="https://blog.nubecolectiva.com/como-convertir-el-contenido-de-un-div-a-imagen-en-angular-10/"

target="_blank"

title="Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1"

alt="Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1"

<img

src="https://blog.nubecolectiva.com/wp-content/uploads/2020/07/aimg_destacada_blog_devs-2-930x360.png"

class="img-fluid"

title="Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1"

alt="Como Convertir el contenido de un Div a Imagen en Angular 10 – Parte 1"

</a>

</p>

Integer nisi justo, faucibus at ultricies in, mattis eget leo. Morbi nec erat bibendum, aliquet quam eget, bibendum sapien. Curabitur ac risus vulputate lectus dignissim venenatis. Ut ac erat convallis metus maximus sollicitudin. Fusce

ut dui arcu. Proin lacinia velit ac ligula dapibus, quis venenatis dui volutpat. Nullam rhoncus erat sit amet placerat mattis. Vestibulum gravida pellentesque magna non viverra. Suspendisse suscipit turpis ut turpis rutrum semper.

Quisque vitae luctus neque, quis vulputate massa. Aliquam vestibulum aliquam consectetur. Mauris ut nibh a dolor viverra luctus. Nam et erat viverra, rutrum quam eget, suscipit quam. Mauris a euismod libero. Aliquam eu odio vel sapien

pellentesque elementum. Curabitur purus sapien, aliquam eget eros at, viverra viverra lorem.

</p>

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.


// Defino un tamaño de letra inicial de 16px
function tamañoLetra() {
  size = $(".mitexto" ).css("font-size");
  size = parseInt(size, 10);
  $( ".tamaño-actual" ).text(size);
} 

// Obtengo el tamaño de letra inicial de 16px 
tamañoLetra();

// Defino un tamaño de letra inicial de 16px

function tamañoLetra() {

size = $(".mitexto" ).css("font-size");

size = parseInt(size, 10);

$( ".tamaño-actual" ).text(size);

}

// Obtengo el tamaño de letra inicial de 16px

tamañoLetra();

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.


// Función para disminuir el tamaño del texto (fuente) 
$(".disminuir").on("click", function() {
  if ((size - 2) >= 13) {
    $(".mitexto").css("font-size", "-=2");
    $(".tamaño-actual").text(size -= 1);
  }
});

// Función para aumentar el tamaño del texto (fuente) 
$(".aumentar").on("click", function() { 
  if ((size + 2) <= 47) {
    $(".mitexto").css("font-size", "+=2");
    $(".tamaño-actual").text(size += 1);
  }
});

// Función para restablecer el tamaño del texto (fuente) al tamaño inicial 
$(".restablecer").on("click", function() {
  $(".mitexto").css("font-size", "initial");
  size = $(".mitexto" ).css("font-size");
  size = parseInt(size, 10);
  $( ".tamaño-actual" ).text(size);
});

// Función para disminuir el tamaño del texto (fuente)

$(".disminuir").on("click", function() {

if ((size - 2) >= 13) {

$(".mitexto").css("font-size", "-=2");

$(".tamaño-actual").text(size -= 1);

}

});

// Función para aumentar el tamaño del texto (fuente)

$(".aumentar").on("click", function() {

if ((size + 2) <= 47) {

$(".mitexto").css("font-size", "+=2");

$(".tamaño-actual").text(size += 1);

}

});

// Función para restablecer el tamaño del texto (fuente) al tamaño inicial

$(".restablecer").on("click", function() {

$(".mitexto").css("font-size", "initial");

size = $(".mitexto" ).css("font-size");

size = parseInt(size, 10);

$( ".tamaño-actual" ).text(size);

});

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.