DOM'a CSS Class Bilgisi Eklemek veya Çıkarmak

ClassList

JavaScrip’te CSS classlarını manipule etmenin en iyi yollarından biri classList kullanmaktır. classList bir öğenin sınıf isimlerini DOMTokenList olarak döndürür. classList özelliği tüm modern browserlarda çalışır.

Syntax

const elementClasses = elementNodeReference.classList;

Properties

  <div id="content" class="main red">JavaScript classList</div>

• add() : HTML öğesine bir veya daha fazla class ekler.

let div = document.querySelector('#content');
div.classList.add('info');

Yukarıda content id'li ögeyi seçtik ve ona info class'ını ekledik.

let div = document.querySelector('#content');
div.classList.add('info','visible','block');

Tek seferde birden fazla da class ekleyebiliriz.

• remove() : HTML öğesinden bir veya daha fazla class'ı siler.

let div = document.querySelector('#content');
div.classList.remove('info');

Yukarıda content id'li ögeyi seçtik ve ona ait info class'ını kaldırdık.

• item() : HTML de class'ı verilen index sırasına göre döndürür. Eğer index, class length'inden (sayısından) daha büyük veya length'ine eşit olursa undefined döner.

let div = document.querySelector('#content');
div.classList.item(0);

Yukarıda content id'li ögeyi seçtik ve ona ait ilk class'ı çağırdık.

• contains() : Element verilen class'ı içeriyorsa true, içermiyorsa false döner. Bu sayede bir işlem yaptırmadan önce kontrol edebiliriz.

let div = document.querySelector('#content');
div.classList.contains('warning');  

• Toggle() : classList.add() ve classList.remove() yöntemini aynı anda çağırmak yerine classList.toggle() yöntemini kullanılabilir.

Bu metodu kullanmadan önce contain() metodu ile sinisin var olup olmadığını manuel olarak kontrol etmek gerekir.

let div = document.querySelector('#content');
div.classList.toggle('visible');

• replace() : Bir CSS sınıfını başka bir sınıfla değiştirmek için kullanılır.

let div = document.querySelector('#content');
div.classList.replace('info','block');

• length() : Bir öğede bulunan sınıf sayısını bilmemizi sağlar.

Aşağıda codepen ile deneyimleyebilirsiniz!

Alıştırma önerisi

1. Codepen'de oluşturulmuş olan butona tıkladığımızda çemberin rengini classList metotlarını kullanarak değiştirdik. Başka button'lar ve class'lar ekleyiniz.

Aşağıda codepen ile deneyimleyebilirsiniz!

2. Codepen'de oluşturmuş olan button'lara tıklandığında istenilen değişiklikleri yapınız.

Aşağıda codepen ile deneyimleyebilirsiniz!