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');

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

Sıradaki ders: setAttribute ve removeAttribute

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler