0

¿Como puedo añadir una función en JS la cual me permita aumentar y disminuir el tamaño de las fuentes de la pagina desde JavasScript?.

He probado con esto pero no me funciono para subir y bajar el tamaño de las fuentes.

document.addEventListener('keydown', (event) =>{
  if (event.key == 'a'|| event.key == 'A'){
    DIVVACIO.style.fontSize = "+ 10px";
  }
  else if (event.key == 'b'|| event.key == 'B'){
    DIVVACIO.style.fontSize = "- 10px";
  }
})
1
  • Solo quita el + y - del fontSize. Commented el 2 may. 2023 a las 15:48

2 respuestas 2

0

No agregues ese +10 o -10 al modificar el tamaño simplemente dale el tamaño fijo, el estilo no acepta ese caracter + o - que agregas, es como si escribieras font-size: +10px lo que es incorrecto solo deberia ser font-size: 10px, o simplemente recupera antes el tamaño de fuente para poder sumarle el tamaño como lo hace @Marcos en su ejemplo.

const DIVVACIO = document.getElementById('mi-div');
document.addEventListener('keydown', (event) =>{
    if (event.key == 'a'|| event.key == 'A'){
        DIVVACIO.style.fontSize = "30px";
    }
    else if (event.key == 'b'|| event.key == 'B'){
         DIVVACIO.style.fontSize = "8px";
    }
})
<div id='mi-div'>
Mi texto de prueba
</div>

0

Para poder aumentar o disminuir el tamaño, primero necesitas obtener el tamaño actual.
Para esto podes usar getComputedStyle()

Ejemplo:

const DIVVACIO = document.getElementById('div');

document.addEventListener('keydown', (event) => {
  // Obtenemos los estilos
  const compStyles = window.getComputedStyle(DIVVACIO);
  // Obtenemos el tamaño de la fuente como número
  let fontSize = parseFloat(compStyles.getPropertyValue('font-size'));
  
  if (event.key == 'a' || event.key == 'A') {
    // Incrementamos el tamaño en 10px
    DIVVACIO.style.fontSize = (fontSize + 10) + 'px';
  } else if (event.key == 'b' || event.key == 'B') {
    // Decrementamos el tamaño en 10px
    DIVVACIO.style.fontSize = (fontSize - 10) + 'px';
  }
})
<div id="div">Mi texto</div>

2
  • Muchas gracias !!
    – Seph86
    Commented el 3 may. 2023 a las 16:46
  • @Seph86, si te sirvió, considera votar la respuesta y/o marcara como aceptada. Saludos!
    – Marcos
    Commented el 9 may. 2023 a las 20:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.