En este tutorial crearemos un cambio de tamaño de fuente de texto usando JavaScript. Este código cambiará el tamaño de la fuente del texto cuando el usuario haga clic en un botón. El código usa onclick () para llamar a un método que cambia la base del tamaño de fuente del texto en el valor dado por una función de JavaScript enlazada en el botón. Siéntase libre de modificarlo y aplicarlo en su sistema, este es un tipo de programa fácil de usar
Usaremos JavaScript como un lenguaje de script del lado del servidor porque brinda un mayor control de su página web y extiende su capacidad de una manera moderna. Está escrito en HTML o como fuente externa para agregar algunas características necesarias en su sitio web.
Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilicé para el diseño del diseño https://getbootstrap.com/.
La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Cambiar Tamaño de Fuente de Texto en Javascript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-4">
<h4>Seleccionar Tamaño de Fuente</h4>
<button class="btn btn-default btn-sm" onclick="textResizer(8);" style="margin:5px;">8pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(10);" style="margin:5px;">10pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(11);" style="margin:5px;">11pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(12);" style="margin:5px;">12pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(14);" style="margin:5px;">14pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(16);" style="margin:5px;">16pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(18);" style="margin:5px;">18pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(20);" style="margin:5px;">20pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(24);" style="margin:5px;">24pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(48);" style="margin:5px;">48pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(52);" style="margin:5px;">52pt</button>
<button class="btn btn-default btn-sm" onclick="textResizer(64);" style="margin:5px;">64pt</button>
</div>
<div class="col-md-8">
<center><h2 class="text-primary" id="result">Amo JavaScript</h2></center>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Crear el script:
Este código contiene el script de la aplicación. Este código cambiará el tamaño de fuente del texto cuando se haga clic en el botón. Para hacer esto, simplemente copie y escriba este bloque de códigos dentro del editor de texto, luego guárdelo como script.js dentro de la carpeta js.
function textResizer(num){
var font=parseInt(num);
document.getElementById('result').style.fontSize=font+"px";
}
Ahí lo tienes, hemos aprendido Cambiar Tamaño de Fuente de Texto en Javascript. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
