Cambiar el tamaño de letra dinámicamente

Leyendo esta entrada sobre el uso de botones para cambiar el tipo de letra de forma dinámica, se nos ha ocurrido contar cómo poder hacerlo.

Se puede hacer de varias formas: incrementando o decrementando el tamaño de letra según se pulse en los botones de aunmentar o reducir el tipo de letra, o de forma fija, aumento el tamaño de la letra y lo disminuyo, pero solo a unos tamaños prefijados.

Para hacerlo de forma incremental, debemos crearnos un elemento HTML con un id, para poder acceder a él y cambiarle los estilos directamente.

<p class="texto" id="contenido">...</p>

En el estilo creado deberemos indicar el tamaño de la letra usando porcentaje o medidas de tamaño de fuente (em), sobre todo por comodidad, en este caso usaremos porcentaje.

p.texto {
font-size: 100%;
}

El código necesario para modificar el estilo sería algo así:

function tamano(mas) {
var signo = (mas)? 1 : -1; // Para sumar o restar el porcentaje
// Obtenemos el objeto que contiene el texto
var obj=document.getElementById("contenido");
// Obtenemos el tamaño de letra y lo modificamos
var fontsize = obj.style.fontSize;
fontsize = parseInt(fontsize.replace(/%/g, ''));
fontsize += signo*10;
if (fontsize > 0 && fontsize < 0) {
obj.style.fontSize = fontsize+"%";
}
}

La otra forma de cambiar el tamaño de letra es teniendo tres hojas de estilo, una para cada tipo de letra (normal, pequeña y grande), y usar una de las distintas hojas de estilos según se desee. Esta solución es la mejor para cuando tenemos distintos tipos de letra y tamaños en toda la página web.

El método que vamos a usar es el que se explica aquí, y el cual vamos a explicar. Como ya hemos dicho tenemos tres hojas de estilos:

<link rel="stylesheet" title="normal" href="normal.css" type="text/css" />
<link rel="alternate stylesheet" title="pequena" href="pequena.css" type="text/css" />
<link rel="alternate stylesheet" title="grande" href="grande.css" type="text/css" />

También necesitaremos una función javascript que habilite la seleccionada y deshabilite la actual.

function activarCSS(title) {
// Obtengo los elementos link
var links = document.getElementsByTagName("link");
// Los recorro todos y el que tenga
// el title que queremos lo activamos
// el resto los desactivamos
for (var i=0; i<links.length; i++) {
if (links[i].getAttribute("title") == title) {
links[i].disabled = false;
} else {
links[i].disabled = true;
}
}
}

Por último nos tendremos que crear tres botones para modificar el tamaño de la letra, usando la función activarCSS, con parámetros "normal", "pequena", "grande".

Usuarios que han visto este tema también han visto...

- Apagando elementos “select” en Internet Explorer
- Texto de Colores
- Cómo integrar Google Maps en tu web
- Botones de radio en Javascript
- Modelos de almacenamiento de datos

- Versión imprimible de este documento

- Enviar por e-mail este documento