1

Quiero hacer zoom al mensaje que le inyecte a mi HTML

BOTON.addEventListener('click', ()=>{
  DIV.innerHTML="Mensaje agregado al Div";
});

2 respuestas 2

2

el siguiente código esta comentado y explica como cambiar el tamaño de la fuente de un DIV según una tecla presionada.

Nota: En un teclado de estilo QWERTY funcionará adecuadamente pero si el teclado no fuera QWERTY podría no funcionar y deberás aplicar otro tipo de solución como por ejemplo la que se menciona acá getLayoutMap(), pero lamentablemente aún no es compatible con todos los navegadores a día de hoy.

//creamos una constante de nuestro elemento a utilizar para referenciarlo más comodamente 
const log = document.getElementById("log");

//creamos un evento de escucha global utilizando "document"
//el evento es de tipo "keypress" para escuchar los evento de presionar teclas 
document.addEventListener("keypress", logKey);

//creamos una función que reacciona al evento de keypress en el documento
function logKey(e) {
  //agregamos un texto al "div con id=log" con la tecla presionada 
  log.textContent += ` ${e.code}`;
  //al activarse el evento, podemos cambiar el tamaño de la fuente
  log.style.fontSize = "40px";
  //o podemos cambiar el tamaño según alguna tecla en específico
  //con un "if" podemos definir acciones a realizar según una tecla presionada
  //por ejemplo que la fuente sea de 25px en el "div de id=log"
  if (e.code == "KeyA")
    log.style.fontSize = "25px";

  //acá por ejemplo que la fuente sea de 12px en el "div de id=log"
  if (e.code == "KeyS")
    log.style.fontSize = "12px";
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <label for="sample">Pulsa la tecla "A" para fuente de 25px y "S" para fuente de 12px:</label>
   <div id="log"></div>
</body>
</html>

1

Más simple, puedes hacerlo con switch case, en donde el parámetro del switch es la tecla que presionamos (que será identificada con event.key), y dependiendo a qué tecla sea, ingresa a un case, y ahí asignamos el valor de la variable tamanio, que será quien modificará el tamaño de la letra con texto.style.fontSize = tamanio;. Este comportamiento ocurre cada vez que se presiona la tecla A, S y D, gracias al listener y el keypress.


Para que lo entiendas mejor, cuando presionamos cualquier tecla, ocurre el keypress y llamo al listener, quien se encarga de ejecutar a la función nuevoTamanioLetra(), y el switch de esa función se encarga de evaluar si la tecla que presionamos entran a alguno de los case (o sea si son a, s o d), de lo contrario, ingresa al default, haciendo solo un return.

Más información sobre los listener.


Demo:

function nuevoTamanioLetra(event) {
  let texto = document.getElementById("texto");
  let tecla = event.key;
  let tamanio = "";
  switch(tecla) {
    case "a":
      tamanio = "12px";
      break;
    case "s":
      tamanio = "16px";
      break;
    case "d":
      tamanio = "20px";
      break;
    default:
      return;
  }
  texto.style.fontSize = tamanio;
}

document.addEventListener("keypress", nuevoTamanioLetra);
<p id="texto">Párrafo de ejemplo.</p>

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.