Operasi CSS jQuery - Metode css()

Panduan Operasi CSS jQuery

Contoh

Tetapkan warna elemen <p>:

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

Cuba 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 mengembalikan nilai, atribut CSS singkat tidak didukung (seperti "background" dan "border").

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

Contoh

Dapatkan nilai atribut gaya warna paragraf pertama:

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

Cuba sendiri

Tetapkan Atribut CSS

Tetapkan atribut CSS yang ditentukan untuk semua elemen yang disesuaikan.

$(pemilih).css(name,value)
Parameter Deskripsi
name Wajib. Tentukan nama atribut CSS. Parameter ini boleh mengandungi apa saja atribut CSS, seperti "color".
value

Pilihan. Tentukan nilai atribut CSS. Parameter ini boleh mengandungi apa saja nilai atribut CSS, seperti "red".

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

Contoh

Tetapkan warna semua paragraf menjadi merah:

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

Cuba sendiri

Tetapkan atribut gaya CSS menggunakan fungsi

Tetapkan nilai atribut gaya semua elemen yang disesuaikan.

Fungsi ini mengembalikan nilai atribut yang akan ditetapkan. Menerima dua parameter, index adalah posisi elemen dalam kumpulan objek, value adalah nilai atribut sebelumnya.

$(pemilih).css(name,function(index,value))
Parameter Deskripsi
name Wajib. Tentukan nama atribut CSS. Parameter ini boleh mengandungi apa saja atribut CSS, seperti "color".
function(index,value)

Tentukan fungsi untuk kembali nilai atribut CSS baru.

  • index - Pilihan. Menerima posisi index pemilih
  • oldvalue - Pilihan. Menerima nilai sekarang atribut CSS.

Contoh 1

Tetapkan warna semua paragraf menjadi merah:

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

Cuba sendiri

Contoh 2

Tingkatkan lebar div secara perlahan:

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

Cuba sendiri

Tetapkan beberapa pasangan atribut/nilai CSS

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

Tetapkan objek "nama/nilai pasangan" untuk atribut gaya semua elemen yang disesuaikan.

Ini adalah cara terbaik untuk menetapkan banyak atribut gaya di semua elemen yang disesuaikan.

Parameter Deskripsi
{property:value}

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

Parameter ini boleh mengandungi beberapa pasangan nama/nilai CSS. Contohnya {"color":"red","font-weight":"bold"}

Contoh

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

Cuba sendiri

Panduan Operasi CSS jQuery