toggleClass Metodu

toggleClass metodu bir CSS sınıfının eklenmesini/kaldırılmasını değiştirir: eğer yoksa ekler, varsa kaldırır.

Sözdizimi

Bir CSS sınıfı:

javascript$(seçici).toggleClass(sınıf adı);

Yalnızca ikinci parametreye bağlı olarak CSS sınıfını eklemek veya kaldırmak, ikinci parametre true veya false değerlerini alır:

javascript$(seçici).toggleClass(CSS sınıf adı, durum);

Birden fazla CSS sınıfı:

javascript$(seçici).toggleClass(['sınıf1', 'sınıf2', 'sınıf3', '...']);

Yalnızca ikinci parametreye bağlı olarak CSS sınıflarını eklemek veya kaldırmak:

javascript$(seçici).toggleClass(['sınıf1', 'sınıf2', 'sınıf3', '...'], durum');

Kümedeki her bir öğeye bir işlev uygulanması, durum true veya false olabilir, ve metoda yalnızca CSS sınıfını eklemesini veya kaldırmasını belirtir:

javascript$(seçici).toggleClass(function(kümedeki numara, öğenin mevcut sınıfları, durum), [durum]);

Örnek

Paragrafımızın zaten iki sınıfı var. Hadi ona www sınıfını da ekleyelim:

html<p id="test" class="eee ggg">metin</p>
javascript$('#test').toggleClass('www');

HTML kodu şu şekilde görünecektir:

html<p id="test" class="eee ggg www">metin</p>

Örnek

Ve şimdi www sınıfı zaten öğede mevcut - hadi onu kaldıralım:

html<p id="test" class="eee ggg www">metin</p>
javascript$('#test').toggleClass('www');

HTML kodu şu şekilde görünecektir:

html<p id="test" class="eee ggg">metin</p>

Ayrıca Bakınız

  • addClass, removeClass, hasClass metodları
  • JavaScript özelliği classList,
    saf JavaScript kullanarak bir sınıfın eklenmesini/kaldırılmasını değiştirmek için kullanılabilir