Cara Merubah Warna Font Menggunakan Javascript

Javascript sangat berduna untuk membuat tampilan website menjadi menarik, karena dengan javascript kita dapat membuat animasi pada elemen html yang telah kita buat, misalkan meberikna efek slide pada suatu bos atau merubah warna font pada suatu teks. Pada tutorial kali ini saya akan memberikan tutorial tentang bagaimana Cara Merubah Warna Font Menggunakan Javascript.

Dengan menggunakan tag button kita akan mencoba merubah warna 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 Warna 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="a1">Red</button>
	<button id="a2">Blue</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>

</div>

</body>

</html>

2. Langkah kedua

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

<script type="text/javascript">
	var xx = document.getElementById("text");
	//id a1 di ambil dan di tampung dalam var button1
	var button1 = document.getElementById("a1");
	//id a2 di ambil dan di tampung dalam var button2
	var button2 = document.getElementById("a2");

	//untuk merubah warna menjadi merah
	button1.addEventListener("click", function () {xx.style.color="red";} , false);
	//untuk merubah warna menjadi biru
	button2.addEventListener("click", function () {xx.style.color="blue";} , false);
</script>

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

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

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

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

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

//untuk merubah warna menjadi merah

button1.addEventListener("click", function () {xx.style.color="red";} , false);

//untuk merubah warna menjadi biru

button2.addEventListener("click", function () {xx.style.color="blue";} , 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 red maka warna font pada teks akan berubah menjadi merah

dan apabila teman-teman klik tombol blue maka warna font akan berubah menjadi biru

Bagaimana teman-teman cukup mudahkan merubah warna font menggunakan javascript. Dengan javascript kita bisa merubah style atau css yang sudah ada sehingga tampilan website menjadi lebih menarik.

Sekian tutorial tentang Cara Merubah Warna Font Menggunakan Javascript, semoga bermanfaat.

Facebook DUMET School

Categories