Membuat Background Dinamis Menggunakan jQuery

Hallo teman-teman DUMET School. Pada kesempatan kali ini saya akan membahas tentang cara Membuat Background Dinamis Menggunakan Jquery. Kebetulan untuk mengubah background di dalam body disini saya akan mengubahnya dengan class background yang disediakan di dalam bootstrap seperti .bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white .bg-transparent, namun disini saya akan mengambil beberapa class background saja dan teman-teman juga bisa mengubah backgroundnya dengan gambar atau dengan warna lain dari bootstrap. Cara kerja untuk mengubah backgroundnya teman-teman pilih salah satu warna yang ada select option pada struktur html maka secara otomatis background body akan mengikuti warna sesuai pilihan yang kita pilih di select option.

Langkah pertama untuk Membuat Background Dinamis Menggunakan Jquery yaitu kita membuat struktur htmlnya yang berisi select option dimana didalamnya terdapat pilihan class warna dari bootstrap seperti berikut ini.


<!DOCTYPE html>
<html>
<head>
 <title>Membuat Background Dinamis Menggunakan Jquery</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col text-center">
        <h1>Membuat Background Dinamis Menggunakan Jquery</h1>
        <select class="form-control" id="change">
          <option value="">-pilih-</option>
          <option value="primary">primary</option>
          <option value="secondary">secondary</option>
          <option value="success">success</option>
          <option value="warning">warning</option>
          <option value="danger">danger</option>
        </select>
      </div>
    </div>
  </div>
</body>

</html>

Warna yang disediakan didalam select option di atas ada 5 warna dari bootstrap yaitu .primary .secondary .warning .success .danger . Jika sudah maka langkah selanjutnya kita akan membuat event change menggunakan jquery untuk dapat mengubah warna dari background body seperti pada script di bawah dan teman-teman pastikan library jquery sudah tema-teman sematkan di dalam tag head. Sehingga ketika kita pilih warna yang ada di select option maka warna background body akan ganti sesuai warna yang kita pilih.

<script>
  $(document).ready(function(){
    $("body").addClass("bg-light");
    $("#change").change(function(){
      var bg = $(this).val();
      $("body").removeClass()
      $("body").addClass("bg-"+bg);
    })
  })
</script>

Dan jika dibuka dihalaman browser maka tampilannya akan seperti pada gambar di bawah ini.

Membuat Background Dinamis Menggunakan jQuery

Demikian artikel tentang cara Membuat Background Dinamis Menggunakan Jquery. Semoga artikel ini dapat bermanfaat untuk teman-teman dan buat kalian yang penasaran bisa langsung mencobanya.

28 Agustus 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat