classList API
add, remove, toggle ve contains ile sınıf ekleyip çıkarmayı öğrenirsin.
classList nedir?
Her HTML öğesinin classList adında bir özelliği vardır. Bu özellik, öğenin sınıflarını yönetmenin kolay yoludur. className ile tüm sınıf listesini tek dize olarak yazıp okursun; classList ise tek tek sınıfları ekleyip çıkarmaya izin verir.
const box = document.querySelector('.box');
box.classList.add('active');Burada 'active' sınıfı box öğesine eklenir. Aynı sınıf zaten varsa hiçbir şey olmaz.
toggle ve contains
classList'in iki yararlı metodu daha vardır. toggle metodu sınıf yoksa ekler, varsa kaldırır. contains metodu sınıfın varlığını true ya da false olarak döndürür.
box.classList.toggle('hidden');
if (box.classList.contains('hidden')) {
// gizli
}Böylece bir düğmeye her tıklamada öğeyi gizleyip gösterebilirsin; önce varlığını denetlemek zorunda değilsin.
Uygulama Menüyü aç
menu değişkeni bir öğeyi gösteriyor. Menüyü açmak için önce 'closed' sınıfını kaldır, sonra 'open' sınıfını ekle.
Örnek çözümü göster
menu.classList.remove('closed');
menu.classList.add('open');Kendini test et
-
Hangisi 'open' sınıfını ekler?
const box = document.querySelector('.box'); // A box.classList.add('open'); // B box.classList.remove('open'); // C box.classList.toggle('open'); // D box.classList.contains('open');- A
- B
- C
- D
Cevabı göster
A — Doğru! add sınıfı ekler.
-
Sınıf ekle
const box = document.querySelector('.box'); box.classList.____('highlight');Cevabı göster
const box = document.querySelector('.box'); box.classList.add('highlight'); -
classList metotlarını eşleştir
- add('x')
- Sınıf ekler
- remove('x')
- Sınıf kaldırır
- contains('x')
- true/false döndürür