Tombol Merubah Ukuran Font dengan Jquery

Jquery memiliki kemampuan untuk mengolah HTML dan CSS dengan secara langsung. Artinya setiap ada aksi yang dilakukan oleh jquery maka perubahan tersebut akan langsung berubah tanpa menunggu browser untuk reload. Sesuai dengan pembahasan kita pada artikel kali ini, kita akan mencoba membuat tombol merubah ukuran font dengan Jquery.

Tombol ini akan membuat secara otomatis merubah ukuran font yang ada pada website kita sesuai tombol mana yang ditekan. Pada contoh kita akan membuat 2 buah tombol, yang pertama untuk merubah ukuran font menjadi kecil dan yang kedua untuk merubah ukuran font menjadi besar.

Bagaimana cara membuatnya ? Kalian bisa ikuti contoh code dibawah ini.

font.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Ukuran font</title>
	<link rel="stylesheet" href="font-awesome.css">
	<style>
		.post{
			width: 500px;
		}
		p {
			font-size: 14px;
		}
	</style>
</head>
<body>
	Ukuran font : <a href="#" style="font-size: 12px;" id="kecil">A</a> | <a href="#" id="besar" style="font-size: 18px;">A</a>
	
	<div class="post">
		<p class="teks">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
		    $("#besar").click(function() {
			    fontSize = parseInt($('.teks').css("font-size")) + 1;
			    if(fontSize >= 21){
			    	$('.teks').css({'font-size':20});
			    }else{		    
			    	$('.teks').css({'font-size':fontSize});
			    }
			});
			$("#kecil").click(function() {
			    fontSize = parseInt($('.teks').css("font-size")) - 1;			    
			    if(fontSize <= 8){
			    	$('.teks').css({'font-size':8});
			    }else{		    
			    	$('.teks').css({'font-size':fontSize});
			    }
			});

		});
	</script>
</body>
</html>

Kalian simpan file tersebut dengan format html. Untuk melihat hasilnya kalian bisa buka file tersebut pada browser kalian. Jika berhasil maka tampilnya akan seperti ini.