Quiero hacer zoom al mensaje que le inyecte a mi HTML
BOTON.addEventListener('click', ()=>{
DIV.innerHTML="Mensaje agregado al Div";
});
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>
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>