jQuery mengambil dan mengatur kelas CSS

Dengan jQuery, dapat dengan mudah mengoperasikan elemen CSS.

Operasi CSS jQuery

jQuery memiliki beberapa metode untuk operasi CSS. Kami akan belajar beberapa di bawah ini:

  • addClass() - Menambahkan satu atau beberapa kelas ke elemen yang dipilih
  • removeClass() - Menghapus satu atau beberapa kelas dari elemen yang dipilih
  • toggleClass() - Melakukan operasi penambahan/hapus kelas untuk elemen yang dipilih
  • css() - Mengatur atau mengembalikan atribut gaya

Blok style contoh

Blok style di bawah ini akan digunakan untuk semua contoh di halaman ini:

.penting
{
berat_tulisan:tebal;
ukuran_font:xx-berat;
}
.biru
{
warna:biru;
}

Metode jQuery addClass()

Contoh di bawah ini menunjukkan bagaimana cara menambahkan kelas ke elemen yang berbeda. Tentu saja, saat menambahkan kelas, Anda juga dapat memilih beberapa elemen:

Contoh

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

Coba sendiri

Anda juga dapat menentukan beberapa kelas dalam metode addClass():

Contoh

$("button").click(function(){
  $("#div1").addClass("important blue");
});

Coba sendiri

Metode jQuery removeClass()

Contoh di bawah ini menunjukkan bagaimana cara menghapus kelas yang ditentukan dari elemen yang berbeda:

Contoh

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

Coba sendiri

Metode jQuery toggleClass()

Contoh di bawah ini akan menunjukkan bagaimana cara menggunakan metode jQuery toggleClass(). Metode ini melakukan operasi penambahan/hapus kelas untuk elemen yang dipilih:

Contoh

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Coba sendiri

Metode jQuery css()

Kami akan membahas metode jQuery css() di bab berikutnya.

Panduan Referensi jQuery HTML

Untuk informasi lengkap tentang metode jQuery CSS, silakan kunjungi Panduan Referensi jQuery CSS