Operasi CSS jQuery - metode css()

Panduan Referensi Operasi CSS jQuery

Contoh

atur warna elemen <p>:

$(".btn1").click(function(){
  $("p").css("warna","merah");
});

Coba Sendiri

definisi dan penggunaan

metode css() mengembalikan atau menetapkan satu atau beberapa atribut gaya elemen yang cocok

kembalikan nilai atribut CSS

kembalikan nilai atribut CSS elemen yang cocok pertama

Keterangan:Ketika digunakan untuk kembalikan nilai, atribut CSS singkat tidak didukung (seperti "background" dan "border")

$(selector).css(name)
Parameter Deskripsi
name diperlukan. Tentukan nama atribut CSS. Parameter ini dapat mengandung atribut CSS apapun. Misalnya "warna".

Contoh

mendapatkan nilai atribut gaya warna paragraf pertama:

$("p").css("warna");

Coba Sendiri

atur atribut CSS

Tetapkan atribut CSS yang ditentukan semua elemen yang cocok.

$(selector).css(name,value)
Parameter Deskripsi
name Wajib. Tentukan nama atribut CSS. Parameter ini dapat mengandung atribut CSS apapun, seperti "color".
value

Pilihan. Tentukan nilai atribut CSS. Parameter ini dapat mengandung nilai atribut CSS apapun, seperti "red".

Jika nilai kosong diatur, atribut yang ditentukan akan dihapus dari elemen.

Contoh

Tetapkan warna semua paragraf menjadi merah:

$("p").css("color","red");

Coba Sendiri

gunakan fungsi untuk menetapkan atribut CSS

Tetapkan nilai atribut gaya semua elemen yang cocok.

Fungsi ini kembalikan nilai atribut yang akan ditetapkan. Menerima dua parameter, index adalah posisi elemen dalam koleksi objek, value adalah nilai atribut asli.

$(selector).css(name,function(index,value))
Parameter Deskripsi
name Wajib. Tentukan nama atribut CSS. Parameter ini dapat mengandung atribut CSS apapun, seperti "color".
function(index,value)

Tentukan fungsi untuk kembali nilai atribut CSS baru.

  • index - Pilihan. Menerima posisi index selector
  • oldvalue - Pilihan. Menerima nilai atribut CSS saat ini.

Contoh 1

Tetapkan warna semua paragraf menjadi merah:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

Coba Sendiri

Contoh 2

Tingkatkan lebar div secara bertahap:

$("div").click(function() {
  $("this").css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

Coba Sendiri

Setel beberapa pasangan atribut/nilai CSS

$(selector).css({property:value, property:value, ...})

Atur objek "nama/nilai pasangan" untuk atribut gaya semua elemen yang cocok.

Ini adalah cara terbaik untuk menetapkan banyak atribut gaya pada semua elemen yang cocok.

Parameter Deskripsi
{property:value}

Wajib. Menentukan objek "nama/nilai pasangan" yang akan dijadikan atribut gaya.

Parameter ini dapat mengandung beberapa pasangan nama properti/nilai CSS. Misalnya {"color":"red","font-weight":"bold"}

Contoh

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

Coba Sendiri

Panduan Referensi Operasi CSS jQuery