--> Cara Mengubah Warna Background Dengan jQuery
Home jQuery

mengubah warna background

SeniKoding.com - Kali ini Admin akan memberikan 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 bisa membuat konten website yang memiliki warna dinamis sesuai pilihan pengunjung.

Belajar JQuery: Mengubah Warna Background Dengan jQuery


Selain itu, jika cara mengubah warna background diterapkan pada halaman admin, dapat digunakan untuk membuat template dengan warna dinamis sehingga dapat mengubah warna suatu konten website tanpa mengubah kode programnya.

Yuukk langsung 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="black"></a>
            <a class="warna" href="#" title="gray"></a>
            <a class="warna" href="#" title="blue"></a>
            <a class="warna" href="#" title="green"></a>
            <a class="warna" href="#" title="yellow"></a>
            <a class="warna" href="#" title="orange"></a>
            <a class="warna" href="#" title="red"></a>
            <a class="warna" href="#" title="pink"></a>
            <a class="warna" href="#" title="brown"></a>
            <a class="warna" href="#" title="purple"></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", kemudian digunakan untuk mengubah style CSS dengan properti "background" pada body. Agar perubahan background lebih halus, pada script CSS nya ditambahkan properti transition sehingga ada animasi saat background diubah.

mengubah warna background

Dan tentu tau ya maksud kode ini <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> buat yang belum tau atau pemula, potongan kode itu adalah 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 bisa di download di web resmi jQuery yaitu www.jquery.com.

Silakan mencoba dan belajar, semoga artikel Cara Mengubah Warna Background Dengan jQuery bermanfaat.

- salam -

Baca juga :


Tidak ada komentar

Posting Komentar

Dilarang SPAM Komentar!

to Top