Pada seri tutorial JQuery kali ini, kita akan mempelajari cara memanipulasi gaya CSS (Cascading Style Sheets) secara langsung menggunakan JQuery. Meskipun umumnya disarankan untuk memanipulasi kelas (class) untuk mengubah gaya seperti yang kita bahas di Tutorial #11, terkadang ada kebutuhan untuk mengatur properti CSS secara inline langsung pada elemen HTML. JQuery menyediakan metode css() untuk tujuan ini.

1. Mengatur Satu Properti CSS

Metode css() memungkinkan Anda untuk mengatur satu properti CSS pada elemen yang dipilih.

Sintaks:

$(selector).css(propertyName, value);

• propertyName: Nama properti CSS yang ingin Anda ubah (contoh: ‘color’, ‘background-color’, ‘font-size’).
• value: Nilai yang ingin Anda berikan pada properti tersebut (contoh: ‘red’, ‘#FF0000′, ’20px’).

Contoh:

Misalnya Anda ingin mengubah warna teks dari semua paragraf menjadi biru:

$('p').css('color', 'blue');

Atau, jika Anda ingin mengubah ukuran font dari elemen dengan ID my-element:

$('#my-element').css('font-size', '24px');

Perhatikan bahwa untuk properti CSS yang menggunakan tanda hubung (seperti background-color), Anda bisa menuliskannya dalam format camelCase di JQuery (misalnya backgroundColor) atau tetap menggunakan tanda hubung dalam tanda kutip (misalnya 'background-color'). Keduanya akan berfungsi.

// Menggunakan camelCase
$('h1').css('backgroundColor', 'lightgray');

// Menggunakan tanda hubung
$('h2').css('background-color', 'lightgreen');

2. Mengatur Beberapa Properti CSS Sekaligus

JQuery juga memungkinkan Anda untuk mengatur beberapa properti CSS pada satu waktu dengan melewatkan objek JavaScript sebagai argumen.

Sintaks:

$(selector).css({
  propertyName1: value1,
  propertyName2: value2,
  // ...
});

Contoh:

Misalnya Anda ingin mengubah warna teks, latar belakang, dan padding dari sebuah div sekaligus:

$('.card').css({
  'background-color': '#f0f0f0',
  'color': '#333',
  'padding': '15px',
  'border-radius': '8px' // Contoh properti dengan tanda hubung
});

Dengan cara ini, kode Anda akan terlihat lebih rapi dan ringkas saat mengubah beberapa properti.

3. Mendapatkan Nilai Properti CSS

Selain mengatur, metode css() juga bisa digunakan untuk mendapatkan nilai properti CSS dari elemen yang dipilih. Jika Anda memanggil css() dengan hanya satu argumen (nama properti), maka akan mengembalikan nilai properti tersebut.

Sintaks:

$(selector).css(propertyName);

Contoh:

Untuk mendapatkan warna teks dari paragraf pertama:

let textColor = $('p:first').css('color');
console.log('Warna teks paragraf pertama adalah: ' + textColor);

Kapan Menggunakan css()?

Meskipun memanipulasi kelas (menggunakan addClass(), removeClass(), toggleClass()) lebih disarankan untuk sebagian besar skenario karena memisahkan style dari behavior, ada beberapa situasi di mana menggunakan css() secara langsung akan lebih tepat:

• Perhitungan Dinamis: Ketika nilai properti CSS perlu dihitung secara dinamis oleh JavaScript (misalnya, mengatur lebar berdasarkan ukuran jendela, menghitung posisi elemen).
• Animasi Sederhana: Untuk transisi atau animasi CSS yang sangat spesifik dan one-off yang tidak memerlukan kelas terpisah.
• Pengujian atau Debugging: Untuk dengan cepat mengubah gaya suatu elemen saat sedang dalam tahap pengembangan.

Dengan memahami metode css() ini, Anda memiliki kontrol yang lebih besar atas presentasi visual elemen-elemen di halaman web Anda menggunakan JQuery.