jQuery CSS Sınıfını Almak ve Ayarlamak

jQuery ile CSS elemanlarını kolayca işlemek mümkündür.

jQuery CSS İşlemleri

jQuery, CSS işlemleri için birçok yöntem sunar. Aşağıdaki bu yöntemleri öğreneceğiz:

  • addClass() - Seçilen elemanlara bir veya daha fazla sınıf eklemek
  • removeClass() - Seçilen elemanlardan bir veya daha fazla sınıfı silmek
  • toggleClass() - Seçilen elemanlara ek/silme sınıfı değişikliği yapmak
  • css() - Stil özelliklerini ayarlamak veya döndürmek

Örnek Stil Tablosu

Aşağıdaki stil tablosu, sayfadaki tüm örnekler için kullanılacaktır:

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

jQuery addClass() yöntemi

Aşağıdaki örnek, farklı elemanlara sınıf özelliği nasıl eklenacağının gösterilmiştir. Tabii ki, sınıf eklerken birden fazla elemanı da seçebilirsiniz:

Örnek

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

Deneyin

addClass() yönteminde de birden fazla sınıf belirtebilirsiniz:

Örnek

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

Deneyin

jQuery removeClass() yöntemi

Aşağıdaki örnek, farklı elemanlardan belirli bir sınıf özelliğini nasıl sileceğini gösterir:

Örnek

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

Deneyin

jQuery toggleClass() yöntemi

Aşağıdaki örnek, jQuery toggleClass() yöntemini nasıl kullanılacağını gösterecektir. Bu yöntem, seçilen elemanlara ek/silme sınıfı değişikliği yapar:

Örnek

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

Deneyin

jQuery css() yöntemi

jQuery css() yöntemini bir sonraki bölümde açıklayacağız.

jQuery HTML Kılavuzu

jQuery CSS yöntemlerinin tam içeriği hakkında bilgi almak istiyorsanız, sitemizi ziyaret edin jQuery CSS İşlemleri Kılavuzu