Manipulasi CSS

Persiapkan Halaman HTML

Pastikan Anda memiliki struktur HTML yang membutuhkan manipulasi CSS. Misalnya, elemen dengan ID atau kelas tertentu.


<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Manipulasi CSS dengan jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="kontainer">
        <p class="teks">Ini adalah contoh teks.</p>
        <button id="ubahWarna">Ubah Warna</button>
    </div>
</body>
</html>

Tambahkan Script jQuery

Sertakan skrip jQuery di bagian <head> atau sebelum tag penutup </body>.

Manipulasi CSS Menggunakan jQuery

Gunakan jQuery untuk memanipulasi elemen-elemen HTML. Berikut adalah beberapa contoh:


a. Mengubah Warna Teks


$(document).ready(function(){
    $("#ubahWarna").click(function(){
        $(".teks").css("color", "blue");
    });
});

b. Mengubah Ukuran Teks


$(document).ready(function(){
    $("#ubahUkuran").click(function(){
        $(".teks").css("font-size", "24px");
    });
});

c. Menyembunyikan atau Menampilkan Elemen


$(document).ready(function(){
    $("#sembunyikan").click(function(){
        $(".teks").hide();
    });

    $("#tampilkan").click(function(){
        $(".teks").show();
    });
});

d. Menambahkan Efek Animasi


$(document).ready(function(){
    $("#animasi").click(function(){
        $(".teks").slideUp();
    });
});

Uji Coba

Simpan dan buka halaman HTML di browser Anda. Saat Anda mengklik tombol-tombol yang ada, Anda akan melihat manipulasi CSS yang dijalankan dengan bantuan jQuery.

Catatan:

  • Pastikan Anda telah menyertakan pustaka jQuery di halaman HTML Anda.
  • Anda dapat mengganti elemen, ID, kelas, atau properti CSS sesuai dengan kebutuhan Anda.

Semoga tutorial ini membantu Anda memulai manipulasi CSS dengan jQuery! Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.

PREVIOUS
NEXT