Cara Mengubah Warna Background Dengan Jquery
- Kali ini Admin akan menunjukkan tutorial bagaimana cara merubah warna background website dengan meng klik tombol. Background warna diwebsite mungkin jarang diubah-ubah. Namun dengan mempelajari ini, kita tidak hanya bisa mengubah background saja, tetapi kita juga sanggup menciptakan konten website yang mempunyai warna dinamis sesuai pilihan pengunjung.
Belajar JQuery: Mengubah Warna Background Dengan jQuery
Selain itu, kalau cara mengubah warna background diterapkan pada halaman admin, sanggup dipakai untuk menciptakan template dengan warna dinamis sehingga sanggup mengubah warna suatu konten website tanpa mengubah instruksi programnya.
Yuukk pribadi saja menuju penulisan kodenya:
<!DOCTYPE html> <html> <head> <title>Latihan Cara Mengubah Warna background dengan jQuery</title> <style type="text/css"> body{ transition: 0.5s linear; } #box{ background: #fff; border: 1px solid #ccc; padding: 10px 5px; height: 40px; width: 500px; margin: 40px auto; } .warna{ display: block; width: 40px; height: 40px; float: left; margin: 0 5px; } </style> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.warna').each(function(){ var warna=$(this).attr('title'); $(this).css({'background':warna}); $(this).click(function(){ $('body').css({'background':warna}); }); }); }); </script> </head> <body> <div id="box"> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> <a class="warna" href="#" title="Cara Mengubah Warna Background Dengan jQuery"></a> </div> <br><a href="http://sutekom.blogspot.com" target="_blank">SeniKoding</a> </body> </html> Coba perhatikan script diatas, script jQuery pada warna background body diambil dari nilai atribut tittle dari tombol warna yang di klik. Nilai pada atribut ini disimpan dalam variabel "warna", lalu dipakai untuk mengubah style CSS dengan properti "background" pada body. Agar perubahan background lebih halus, pada script CSS nya ditambahkan properti transition sehingga ada animasi dikala background diubah.
Dan tentu tau ya maksud instruksi ini <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> buat yang belum tau atau pemula, bagian instruksi itu ialah pemanggilan file javascript yang ber ekstensi ( .js), dan letak file tersebut ada di folder js, dan nama file nya jquery-3.1.1.min.js. File tersebut sanggup di download di web resmi jQuery yaitu www.jquery.com.
Silakan mencoba dan belajar, supaya artikel Cara Mengubah Warna Background Dengan jQuery bermanfaat.
- salam -