En son web geliştirme öğreticiler
 

jQuery - Get ve CSS Sınıfları Set

❮ Önceki Sonraki Bölüm ❯

jQuery ile, elementlerin CSS manipüle etmek kolaydır.


jQuery kurgulama CSS

jQuery CSS manipülasyon için çeşitli yöntemler vardır. Biz aşağıdaki yöntemlerden bakacağız:

  • addClass() - Seçilen elemanlara, bir veya daha fazla sınıf ekler
  • removeClass() - seçilen elemanlardan bir veya daha fazla sınıf kaldırır
  • toggleClass() - seçilen elemanlardan sınıfları ekleme / kaldırma arasında geçiş yapar
  • css() - ayarlar veya döndürür style niteliği

Örnek Stil

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

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

.blue {
    color: blue;
}

jQuery addClass() Yöntem

Aşağıdaki örnekte, farklı unsurlara sınıf özelliklerini nasıl ekleneceğini gösterir. sınıfları eklerken Tabii ki, birden çok öğe seçebilirsiniz:

Örnek

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

Ayrıca içinde birden sınıfları belirtebilirsiniz addClass() yöntemiyle:

Örnek

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

jQuery removeClass() Yöntem

Aşağıdaki örnek, farklı elemanların belirli bir sınıf özelliği kaldırma gösterilmektedir:

Örnek

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

jQuery toggleClass() Yöntem

Aşağıdaki örnek, jQuery nasıl kullanılacağını gösterir toggleClass() metodu. Bu yöntem seçilen elemanlardan sınıfları ekleme / kaldırma arasında değişir:

Örnek

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

jQuery css() Yöntem

JQuery css() metodu sonraki bölümde açıklanacaktır.

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»

jQuery CSS Referansı

Tüm jQuery CSS yöntemlerin tamamını görmek için lütfen gidin lütfen jQuery HTML / CSS Referansı .


❮ Önceki Sonraki Bölüm ❯