classList Özelliği

classList özelliği, bir öğenin CSS sınıflarının sözde dizisini içerir ve ayrıca öğenin sınıflarını eklemenize, silmenize ve öğenin sınıfları arasında belirli bir sınıfın varlığını kontrol etmenize olanak tanır.

Burada, içine boşlukla ayrılmış birden fazla sınıf yazılabilen, örneğin www ggg zzz gibi, class niteliğinden bahsediyoruz. classList kullanarak, örneğin, diğer sınıflara dokunmadan ggg sınıfını silebilirsiniz.

Sözdizimi

öğe.classList;

Örnek . Sınıf Sayısı

Bir öğenin sınıf sayısını öğrenelim:

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

Kodun çalıştırılmasının sonucu:

3

Örnek . Sınıfları Geziyoruz

Bir öğenin sınıflarını teker teker yazdıralım:

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
	console.log(className);
}

Kodun çalıştırılmasının sonucu:

'www'
'ggg'
'zzz'

Ayrıca Bakınız

belirtilen sınıfı ekleyen classList.add metodu,
belirtilen sınıfı silen classList.remove metodu,
belirtilen sınıfı kontrol eden classList.contains metodu,
belirtilen sınıfı değiştiren classList.toggle metodu,