jQuery mendapatkan dan mengatur kelas CSS

Dengan jQuery, dengan mudah dapat beroperasi pada elemen CSS.


Operasi jQuery CSS

jQuery memiliki beberapa metode operasi CSS. Kita akan belajar berikut:

  • addClass () - Tambahkan satu atau lebih kategori untuk elemen yang dipilih
  • removeClass () - Menghapus satu atau lebih elemen yang dipilih dari kelas
  • toggleClass () - untuk elemen yang dipilih di Add / Remove operasi kelas beralih
  • css () - Set atau kembali atribut gaya

Contoh stylesheet

Stylesheet berikut akan digunakan untuk semua contoh di halaman ini:

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}


jQuery addClass () metode

Contoh berikut menunjukkan bagaimana untuk menambahkan atribut kelas untuk elemen yang berbeda. Tentu saja, ketika Anda menambahkan kelas, Anda dapat juga memilih beberapa elemen:

contoh

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

Coba »

Anda juga dapat menentukan di addClass () metode dalam beberapa kategori:

contoh

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

Coba »


jQuery removeClass () metode

Contoh berikut menunjukkan bagaimana menghapus kelas ditentukan atribut elemen yang berbeda:

contoh

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

Coba »


jQuery toggleClass () metode

Contoh berikut menunjukkan bagaimana menggunakan metode jQuery toggleClass (). Metode switching operasi elemen yang dipilih Add / Remove kelas:

contoh

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

Coba »


jQuery css () metode

Kami akan menjelaskan jQuery css () metode dalam bab berikutnya.