Cara Merubah Ukuran Font Menggunakan Javascript

Javascript dapat membuat website kita menjadi indah dan menarik, karena dengan javascript kita dapat membuat animasi pada elemen html yang telah kita buat, misalkan meberikna efek memutar pada suatu icon atau merubah ukuran font pada suatu teks. Pada tutorial kali ini saya akan memberikan tutorial tentang bagaimana Cara Merubah Ukuran Font Menggunakan Javascript.

Dengan menggunakan tag button kita akan mencoba merubah ukuran font pada sautu text yang telah kita ketikan dan tentunya di perlukan id untuk kita gunakan dalam program javascriptnya. Langsung saja saya akan memberikan langkah-langkah Cara Merubah Ukuran Font Menggunakan Javascript, berikut langkah-langkahnya:

1. Langkah pertama

Teman-teman buka text editor lalu ketikan kode html di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>Rubah Warna Font</title>
</head>
<body>

<div class="container" style="width:500px; margin: auto;">
	
	<p id="text">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>

	<button id="f1">xx-large</button>
	<button id="f2">xx-small</button>

</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Rubah Warna Font</title>

</head>

<body>

<p id="text">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>

<button id="f1">xx-large</button>

<button id="f2">xx-small</button>

</div>

</body>

</html>

2. Langkah kedua

Teman-teman ketikan script di bawah ini unutk merubah ukuran fontnya

<script type="text/javascript">
	var xx = document.getElementById("text");
	//id a1 di ambil dan di tampung dalam var button1
	var button1 = document.getElementById("f1");
	//id a2 di ambil dan di tampung dalam var button2
	var button2 = document.getElementById("f2");
	
	
	//untuk merubah font menjadi sangat besar
	button1.addEventListener("click", function () {xx.style.fontSize ="xx-large";} , false);
	//untuk merubah font menjadi sangat kecil
	button2.addEventListener("click", function () {xx.style.fontSize ="xx-small";} , false);
</script>

var xx = document.getElementById("text");

//id a1 di ambil dan di tampung dalam var button1

var button1 = document.getElementById("f1");

//id a2 di ambil dan di tampung dalam var button2

var button2 = document.getElementById("f2");

//untuk merubah font menjadi sangat besar

button1.addEventListener("click", function () {xx.style.fontSize ="xx-large";} , false);

//untuk merubah font menjadi sangat kecil

button2.addEventListener("click", function () {xx.style.fontSize ="xx-small";} , false);

</script>

3. Langkah ketiga

Buka file html teman-teman di browser, maka akan tampak tampilan seperti gambar di bawah ini:

Coba teman-teman klik tombol xx-large maka ukuran font pada teks akan berubah menjadi sangat besar

dan apabila teman-teman klik tombol xx-small maka ukuran font akan berubah menjadi sangat kecil

Dan berikut saya berikan ukuran apa saja yang bisa kita pakai untuk merubah ukuran dari text tersebut:

xx-small
x-small
small
medium
large
x-large
xx-large

Teman-teman bisa mengganti ukuran font dengan ukuran yang sesuai untuk website teman-teman.

Bagaimana teman-teman cukup mudahkan merubah ukuran font menggunakan javascript. Sekian tutorial tentang Cara Merubah Ukuran Font Menggunakan Javascript, semoga bermanfaat.

Facebook DUMET School

Categories