Aquí os presento un procedimiento sencillo para aumentar y reducir el tamaño de letra de una colección de etiquetas en un página web, o lo que yo llamo «texto chicloso (bubble gum text)».
Un posible escenario de aplicación de esta técnica sería una página web en la que usuarios con deficiencias visuales tuvieran que ampliar determinados textos (ya nos tocó hacer algo así en la web de una asociación de diabéticos, vaya).
En este caso hemos llamado a la colección completa de etiquetas «p», pero también se podría crear una clase solo para determinados elementos y rescatarla con getElementsbyClassName (en los navegadores que entiendan esa propiedad, claro).
Aquí va el código completo del ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script>
function fuente(accion) {
maximo = 230;
minimo = 70;
incremento = 10;
parrafos = document.getElementsByTagName('p');
if(parrafos[0].style.fontSize == '') {
parrafos[0].style.fontSize = '100%';
}
actual = parseInt(parrafos[0].style.fontSize);
if(accion == 'aumentar' && ((actual+incremento) <= maximo )) {
valor = actual + incremento;
}
if(accion=="disminuir" && ((actual+incremento) >= minimo )) {
valor = actual - incremento;
}
for(i = 0; i < parrafos.length; i ++) {
parrafos[i].style.fontSize = valor + "%";
}
}
</script>
</head>
<body>
<h3>Cambia el tamaño de los párrafos
<button type="button" onclick="fuente('aumentar')">+</button>
<button type="button" onclick="fuente('disminuir')">-</button>
</h3>
<p>Primer párrafo chicloso.</p>
<p>Segundo párrafo chicloso.</p>
<p>Y así podría haber muchos más párrafos chiclosos.</p>
</body>
</html>