Latest web development tutorials

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.