Bab 6: Manipulasi CSS dengan jQuery – Ubah Tampilan Website Secara Dinamis

Bab 6: Manipulasi CSS dengan jQuery – Ubah Tampilan Website Secara Dinamis

Setelah mempelajari Manipulasi HTML, langkah berikutnya dalam jQuery adalah Manipulasi CSS. Dengan jQuery, Anda bisa mengubah tampilan elemen HTML secara dinamis tanpa menulis ulang file CSS atau me-refresh halaman.

Manipulasi CSS sangat berguna untuk:

  • Membuat efek interaktif
  • Menyesuaikan tampilan berdasarkan aksi pengguna
  • Mengubah style elemen secara realtime

Mengubah CSS dengan .css()

Method .css() adalah metode paling dasar untuk manipulasi CSS di jQuery.

Contoh:

$("#judul").css("color", "red");

Artinya: elemen dengan id judul akan berubah warna menjadi merah.

Mengubah Beberapa Properti Sekaligus

$("#judul").css({
  "color": "blue",
  "font-size": "24px",
  "background-color": "yellow"
});

Menambahkan dan Menghapus Class

Menggunakan class adalah cara terbaik agar tetap menjaga konsistensi style di CSS.

Menambahkan Class

$("#box").addClass("aktif");

Menghapus Class

$("#box").removeClass("aktif");

Toggle Class (Aktif / Nonaktif)

$("#box").toggleClass("aktif");

Mengubah Dimensi Elemen

jQuery juga memudahkan manipulasi ukuran elemen.

$("#kotak").width(200);   // lebar 200px
$("#kotak").height(150);  // tinggi 150px
$("#kotak").css("padding", "10px"); // padding 10px

Menggunakan Efek .show(), .hide(), dan .toggle()

Manipulasi CSS sering dikombinasikan dengan efek untuk interaktivitas.

$("#btnTampil").click(function(){
  $("#box").show();   // menampilkan elemen
});

$("#btnSembunyi").click(function(){
  $("#box").hide();   // menyembunyikan elemen
});

$("#btnToggle").click(function(){
  $("#box").toggle(); // menampilkan/menyembunyikan elemen
});

Efek Animasi dengan .fadeIn(), .fadeOut(), .slideUp(), .slideDown()

Contoh:

$("#box").fadeOut(1000);  // menghilang dalam 1 detik
$("#box").fadeIn(1000);   // muncul dalam 1 detik
$("#box").slideUp(500);   // naik dan hilang
$("#box").slideDown(500); // turun dan muncul

Contoh Lengkap Manipulasi CSS jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Manipulasi CSS jQuery</title>
  <style>
    #box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin: 20px;
    }
    .aktif {
      border: 3px solid red;
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="box"></div>
<button id="ubah">Ubah Style</button>
<button id="toggleClass">Toggle Class</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#ubah").click(function(){
    $("#box").css({
      "width": "300px",
      "height": "150px",
      "background-color": "pink"
    });
  });

  $("#toggleClass").click(function(){
    $("#box").toggleClass("aktif");
  });
</script>

</body>
</html>

Kesalahan Umum dalam Manipulasi CSS

Beberapa kesalahan yang sering terjadi:

  • ❌ Salah selector
  • ❌ Mengubah properti yang tidak ada
  • ❌ Lupa menambahkan satuan (px, %, em) pada beberapa properti
  • ❌ Tidak menggunakan $(document).ready()

Kesimpulan

Pada Bab 6: Manipulasi CSS dengan jQuery, Anda telah belajar cara mengubah style, menambah/menghapus class, serta membuat efek animasi. Manipulasi CSS dengan jQuery membuat website lebih interaktif dan menarik.

Pada bab berikutnya, kita akan membahas Event Handling jQuery untuk menghubungkan aksi pengguna dengan efek dan perubahan style.

Related Posts