Membuat Background Dinamis Menggunakan jQuery

28/08/2019    Shelli Ripati    64     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More