Cara Mengubah Background Color dengan Select Option
Cara Mengubah Background Color dengan Select Option - jQuery merupakan sebuah library dari javascript yang bertujuan untuk mempermudah dalam menuliskan perintah - perintah baris program. Selain itu jQuery telah banyak digunakan dalam menunjang kebutuhan website seperti animasi, efek dan lain - lain agar tampilan website terlihat lebih interaktif. Di kesempatan kali ini saya akan berbagi tutorial jQuery sederhana yaitu Cara Mengubah Background Color dengan Select Option, jika tutorial ini diterapkan pada halaman website tentu akan membuat halaman websitenya terlihat lebih interaktif. Nah, bagaimana cara membuatnya ? langsung saja simak langkah - langkah nya berikut ini.
Langkah pertama, buatlah satu file index.html untuk membuat elemen option yang akan dijadikan elemen utama untuk mengubah warna dari background body. Silahkan ketikan kode HTML seperti berikut.
<label for="">Pilih Warna : </label>
<select id="select-color">
<option value="#2196F3">Blue</option>
<option value="#FFC107">Yellow</option>
<option value="#4CAF50">Green</option>
<option value="#E91E63">Pink</option>
<option value="#9E9E9E">Grey</option>
<option value="#9C27B0">Purple</option>
</select>
</body>
Langkah selanjutnya, setelah mengetikan kode HTML seperti diatas yaitu membuat aksi dimana ketika memilih warna pada option nya maka background pada body akan berubah sesuai dengan warna yang dipilihkan. Untuk itu silahkan ketikan kode jQuery berikut ini.
<script type="text/javascript">
$(document).ready(function(){
$("#select-color").change(function(){
var selectedcolor = $('#select-color').val();
$("body").css({"background-color": selectedcolor});
});
});
</script>
Pada kasus ini saya menggunakan library jQuery secara online, kalian juga bisa menggunakan library jQuery secara offline yaitu dengan download terlebih dahulu pada halaman jquery.com. Setelah semua kode HTML dan jQuery telah diketikan, silahkan simpan kembali file index.html nya kemudian kalian bisa mencoba hasilnya pada browser masing - masing.
Baiklah, cukup sekian tutorial jQuery sederhana tentang bagaimana Cara Mengubah Background Color dengan Select Option, semoga tutorial ini bermanfaat. Selamat mencoba dan sampai jumpa ditutirial selanjutnya :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
