JavaScript classList, bir öğenin CSS (Basamaklı Stil Sayfası) sınıflarının şekillendirilmesine olanak tanıyan, JavaScript'in bir DOM özelliğidir. JavaScript classList, CSS sınıflarının adlarını döndüren salt okunur bir özelliktir. Bu, JavaScript'in style ve className içeren diğer özelliklerine göre JavaScript'in bir özelliğidir. style özelliği, CSS sınıfı öğesinin rengini veya diğer stilini döndürür ve className, CSS dosyasında kullanılan sınıfların adlarını döndürmek için kullanılır. Ancak className ve classList özellikleri, CSS dosyasında kullandığımız sınıfların adını farklı şekillerde döndürür. className özelliği sınıfların adını bir dize biçiminde döndürürken, classList özelliği JavaScript sınıfların adını bir dizi biçiminde döndürür.

Burada, JavaScript classList hakkında kısa bir tartışma yapacağız ve ayrıca yöntemlerini pratik uygulamalarıyla tartışacağız.

JavaScript classList özelliği örneği

Aşağıda, bir öğenin sınıf değerini alacağımız JavaScript classList özelliğinin bir örneği bulunmaktadır.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

Yukarıdaki kodun çıktısı aşağıda gösterilmiştir:

JavaScript classList Özellik

classList özelliği, sınıf öğelerinin değerini temsil etmek için kullanılır. DOMTokenList nesne. Bu salt okunur bir özelliktir ancak programda kullanılan sınıfları değiştirerek değerini değiştirebiliriz. JavaScript classList özelliği, sınıf öğeleri üzerinde farklı işlemler gerçekleştirebileceğimiz aşağıdaki yöntemlerden oluşur:

eklemek():Add() yöntemi, öğeye bir veya daha fazla sınıf eklemek için kullanılır.kaldırmak():Remove() yöntemi, öğede bulunan sınıf sayısından bir veya daha fazla sınıfı çıkarmak için kullanılır.geçiş():toggle() yöntemi, bir öğenin belirtilen sınıf adlarını değiştirmek için kullanılır. Bu, tek tıklamayla belirtilen sınıfın ekleneceği ve başka bir tıklamayla sınıfın kaldırılacağı anlamına gelir. Bir elemanın geçiş özelliği olarak bilinir.yer değiştirmek():Change() yöntemi mevcut bir sınıfı yeni bir sınıfla değiştirmek için kullanılır.içerir():JavaScript classList özelliğinin include() yöntemi, Boolean değerini çıktı olarak döndürmek için kullanılır. Sınıf mevcutsa değer true olarak döndürülür, aksi takdirde false döndürülür.öğe():item() yöntemi, belirli bir dizindeki sınıfların adını görüntülemek için kullanılır. Böylece sınıf adını döndürür.

Bunlar JavaScript classList'te kullanılan yöntemlerden bazılarıdır.

Tek tek tartışacağız.

classList.add()

CSS öğesine bir veya daha fazla sınıf eklemek için kullanılan işlev.

Örnek:

Aşağıdaki örnek, classList.add() yöntemini kullanarak bir sınıfın nasıl ekleneceğini gösterir:

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

Kodda kullanıcı butona tıkladığında yeni sınıf mevcut sınıfların yanına eklenir. Butona tıkladıktan sonraki çıktı aşağıda gösterilmiştir:

classList.remove()

Remove() işlevi, mevcut sınıfları öğelerden kaldırmak için kullanılır.

10 / 60

Aşağıdaki örnek, classlist.remove() yöntemini kullanarak bir veya daha fazla sınıfın nasıl kaldırılacağını gösterir:

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

Yukarıdaki kodda, kullanıcı düğmeye tıkladığında, belirtilen sınıf mevcut CSS sınıflarından kaldırılır. Butona tıkladıktan sonraki çıktı aşağıda gösterilmiştir:

Classlist.toggle()

Toggle() düğmesi, sınıfları öğeye değiştirmek için kullanılır. Yeni bir sınıf eklemek veya mevcut sınıfları kaldırmak anlamına gelir.

Aşağıda, sınıf eklemek veya kaldırmak için toggle() yönteminden nasıl yararlanacağımızı anlamamızı sağlayacak bir örnek verilmiştir.

dizeye karakter

Örnek:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

Kodda, kullanıcı düğmeye tıkladığında sınıf CSS sınıflarına eklenecek veya kaldırılacaktır. Butona tıkladıktan sonraki çıktı aşağıda gösterilmiştir:

Classlist.contains()

include() metodu, belirtilen sınıfın CSS sınıflarında var olup olmadığını kontrol etmek için kullanılır ve buna göre Boolean değerini true veya false olarak döndürür.

Aşağıda, bir sınıf mevcutsa veya değilse, include() yöntemi kullanılarak nasıl aranacağını gösteren bir örnek verilmiştir:

Örnek:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

Yukarıdaki kodda kullanıcı butona tıkladığında belirtilen sınıfın CSS sınıflarında mevcut olup olmadığını kontrol ettiği görülmektedir. Eğer mevcutsa, true olarak bir Boolean değeri döndürülecektir. Aksi halde false değeri dönecektir. Butona tıkladıktan sonra yukarıdaki kodun çıktısı aşağıda gösterilmiştir:

classlist.replace()

Change() yöntemi mevcut bir sınıfı yenisiyle değiştirmek için kullanılır. Bu, sınıfın öğelerden kaldırıldığı anlamına gelmez, ancak mevcut sınıfın özelliklerinin yeni sınıfın özellikleriyle değiştirildiği anlamına gelir.

Aşağıda mevcut bir sınıfı yeni bir sınıfla nasıl değiştirebileceğimizi anlayacağımız bir örnek bulunmaktadır:

Örnek:

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

Yukarıdaki kodda, kullanıcı butona tıkladığında mevcut sınıf özellikleri yeni sınıf özellikleriyle değiştirilir. Butona tıkladıktan sonraki çıktı aşağıda gösterilmiştir:

classList.item()

item() fonksiyonu, belirtilen indeks değerinde mevcut olan sınıfın adını döndürmek için kullanılır.

Değeri döndürmek için item() yönteminin nasıl kullanılacağını anlamamızı sağlayacak bir örnek aşağıda verilmiştir:

Örnek:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

Kodda kullanıcı butona tıkladığında belirtilen indekste bulunan sınıf görüntülenecektir. Butona tıkladıktan sonra aşağıda gösterildiği gibi belirtilen indeks sınıfı değerini alıyoruz:

Bunlar, classList DOM nesnesinin yöntemlerinden bazılarıdır ve tamamı classList ile ilgilidir.