tutorial pengembangan web terbaru
 

jQuery - Dapatkan dan Set CSS Kelas


Dengan jQuery, mudah untuk memanipulasi CSS elemen.



jQuery Memanipulasi CSS

jQuery memiliki beberapa metode untuk manipulasi CSS. Kita akan melihat metode berikut:

  • addClass() - Menambahkan satu atau lebih kelas untuk elemen yang dipilih
  • removeClass() - Menghapus satu atau lebih kelas dari unsur-unsur yang dipilih
  • toggleClass() - Toggles antara menambahkan / menghapus kelas dari elemen yang dipilih
  • css() - Mengatur atau mengembalikan atribut style

misalnya 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 cara menambahkan atribut kelas untuk elemen yang berbeda. Tentu saja Anda dapat memilih beberapa elemen, saat menambahkan kelas:

Contoh

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

Anda juga dapat menentukan beberapa kelas dalam addClass() metode:

Contoh

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

jQuery removeClass() Metode

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

Contoh

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

jQuery toggleClass() Metode

Contoh berikut akan menunjukkan bagaimana menggunakan jQuery toggleClass() metode. Metode ini matikan antara menambahkan / menghapus kelas dari elemen yang dipilih:

Contoh

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

jQuery css() Metode

JQuery css() metode akan dijelaskan dalam bab berikutnya.


Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»


jQuery CSS Referensi

Untuk gambaran lengkap dari semua metode jQuery CSS, silahkan ke kami Referensi / CSS jQuery HTML .