jQuery - CSS Sınıflarını Al ve Ayarla
jQuery ile öğelerin stilini değiştirmek kolaydır.
jQuery CSS Manipülasyonu
jQuery, CSS manipülasyonu için çeşitli yöntemlere sahiptir. Aşağıdaki yöntemlere bakacağız:
addClass()- Seçili öğelere bir veya daha fazla sınıf eklerremoveClass()- Seçili öğelerden bir veya daha fazla sınıfı kaldırırtoggleClass()- Seçili öğelerden sınıf ekleme/çıkarma arasında geçiş yaparcss()- Stil niteliğini ayarlar veya döndürür
Örnek Stil Sayfası
Bu sayfadaki tüm örnekler için aşağıdaki stil sayfası kullanılacaktır:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
jQuery addClass() Yöntemi
Aşağıdaki örnek, farklı öğelere sınıf niteliklerinin nasıl ekleneceğini gösterir. Elbette, sınıf eklerken birden fazla öğe seçebilirsiniz:
Örnek
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Ayrıca addClass()yöntem içinde birden çok sınıf belirtebilirsiniz:
Örnek
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() Yöntemi
Aşağıdaki örnek, belirli bir sınıf niteliğinin farklı öğelerden nasıl kaldırılacağını gösterir:
Örnek
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
jQuery toggleClass() Yöntemi
toggleClass()Aşağıdaki örnek, jQuery yönteminin nasıl kullanılacağını gösterecektir . Bu yöntem, seçili öğelerden sınıf ekleme/çıkarma arasında geçiş yapar:
Örnek
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery css() Yöntemi
jQuery css()yöntemi bir sonraki bölümde açıklanacaktır.
jQuery Alıştırmaları
jQuery CSS Referansı
Tüm jQuery CSS yöntemlerine tam bir genel bakış için lütfen jQuery HTML/CSS Referansımıza gidin .