Contenido

Como aumentar/disminuir la fuente con Javascript

12 dic

+ 12

Como podeis ver le he puesto a cada post la posibilidad de aumentar o disminuir la fuente actual del post. Esto la verdad es que es muy práctico para esas personas que tienen problemas para leer las letras pequeña.
Voy a intentar mostraros los pasos necesarios para comprender como funciona esto para que podais implementarlo donde querais.

¿Que necesitamos?

Para comenzar vamos declarar una serie de variables para controlar el tamaño que le vamos dando a las fuentes. Para ello declararemos 4 variables globales, que indicarán el tamaño máximo, mínimo, actual y default.

FUENTE_DEFAULT = 9;
FUENTE_ACTUAL = 9;
FUENTE_MASPEQUENA = 7;
FUENTE_MASGRANDE = 18;

Luego, deberemos tener un par de funciones javascript que realizan las funciones de aumento y disminucion.
La función de aumento del tamaño de las fuentes seria la siguiente:

function MasTxt(div) {
FUENTE_ACTUAL = FUENTE_ACTUAL+2;
    if (FUENTE_ACTUAL > FUENTE_MASGRANDE) {
    FUENTE_ACTUAL = FUENTE_MASGRANDE
    }
var divID = document.getElementById(div);
divID.style.fontSize = FUENTE_ACTUAL+”pt”;
}

Donde el único parametro que recibe es el elemento que ha de tratar.
La función de disminución seria de esta forma.

function MenosTxt(div) {
FUENTE_ACTUAL = FUENTE_ACTUAL-2;
    if (FUENTE_ACTUAL < FUENTE_MASPEQUENA) {
    FUENTE_ACTUAL = FUENTE_MASPEQUENA
    }
var divID = document.getElementById(div);
divID.style.fontSize = FUENTE_ACTUAL+”pt”;
}

Recibiendo el mismo elemento de donde modificaremos el tamaño de las fuentes.

Como usarlo

Por último, nos queda utilizarlo. Osea integrarlo en el código para verlo funcionando.
Unicamente bástaria con utilizar el evento onClick de cualquier objeto para realizar la llamada.
Por ejemplo:

<div id=”texto”>Estas fuentes cambiaran de tamaño</div>
<b onClick=”MasTxt(‘texto’);”>+</b> | <b onClick=”MenosTxt(‘texto’);”>-</b>

Ficheros

aumenta.js

Bueno, no es muy complicado y espero que os sirva de algo.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.