JQuery memungkinkan pengembang web untuk Mengubah CSS elemen HTML jQuery melalui metode-metode seperti “.css()”, “.addClass()”, “.removeClass()” dan lain lain.
Berikut adalah beberapa metode yang dapat digunakan untuk mengubah CSS elemen HTML menggunakan JQuery:
- .css(): Mengubah gaya CSS elemen HTML dengan memasukkan properti dan nilai CSS.
$("element").css("property", "value");
- .addClass(): Menambahkan class CSS ke elemen HTML.
$("element").addClass("class-name");
- .removeClass(): Menghapus class CSS dari elemen HTML.
$("element").removeClass("class-name");
- .toggleClass(): Menambahkan atau menghapus class CSS dari elemen HTML tergantung pada apakah class sudah ada atau belum.
$("element").toggleClass("class-name");
- .height(): Mengubah tinggi elemen HTML.
$("element").height(value);
- .width(): Mengubah lebar elemen HTML.
$("element").width(value);
- .show(): Menampilkan elemen HTML yang disembunyikan.
$("element").show();
- .hide(): Menyembunyikan elemen HTML.
$("element").hide();
- .toggle(): Menampilkan atau menyembunyikan elemen HTML tergantung pada apakah elemen sudah terlihat atau tidak.
$("element").toggle();
Catatan: Dalam contoh-contoh di atas, “element” adalah selector yang menentukan elemen HTML yang akan diubah, dan “property” dan “value” adalah properti dan nilai CSS yang akan diterapkan.
Contoh Full Kode
Berikut adalah contoh full kode mengubah CSS elemen HTML menggunakan JQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button#change-color").click(function(){
$("p").css("color", "red");
});
$("button#change-background").click(function(){
$("p").css("background-color", "yellow");
});
$("button#add-class").click(function(){
$("p").addClass("highlight");
});
$("button#remove-class").click(function(){
$("p").removeClass("highlight");
});
});
</script>
<style>
.highlight {
background-color: green;
color: white;
}
</style>
</head>
<body>
<button id="change-color">Change Color</button>
<button id="change-background">Change Background</button>
<br><br>
<button id="add-class">Add Class</button>
<button id="remove-class">Remove Class</button>
<br><br>
<p>This is a paragraph.</p>
</body>
</html>
Dalam contoh di atas, kode JQuery menunggu halaman selesai dimuat menggunakan metode “.ready()”, lalu menangkap event “click” pada tombol-tombol dan mengubah gaya CSS dari elemen <p> sesuai dengan tugas masing-masing tombol. Misalnya, tombol “Change Color” akan mengubah warna teks dari elemen <p>; tombol “Change Background” akan mengubah warna latar dari elemen <p>; tombol “Add Class” akan menambahkan class “highlight” ke elemen <p>; dan tombol “Remove Class” akan menghapus class “highlight” dari elemen <p>.