javaScript classList ile Sınıf Ekleme, Silme ve Geçiş efekti

Sınıfları ekleme ve silme, JavaScript ve DOM işleri konusunda en yaygın görevlerden biri olmalıdır. Bir sınıf ekleme silme konusunda veya basit dom işlerinde jquery kütüphanesini dahil etmek hiçde iyi bir yol değildir. jquery 85kb bir alan kaplar buda sitemizin yüklenmesini yavaşlatabilir. Sınıf ekleme ve silme gibi ortak görevleri yerine getirmek için etkili, yerel yollara sahip olmak önemlidir. classList bu görevi yerine getiren bir javaScript özelliğidir.

ClassList özelliği, bir öğenin sınıf isimlerini DOMTokenList nesnesi olarak döndürür.

Bu özellik, bir öğe üzerinde CSS sınıfları eklemek, silmek ve geçiş efekti için yararlıdır.

ClassList özelliği yalnızca okunabilir ancak add() ve remove() methodu kullanarak değiştirebilirsiniz.

Element.classList


classList özelliği, bir öğenin sınıf isimlerini DOMTokenList nesnesi olarak döndürür.

classList özelliği bizim için bir kaç kullanışlı methodla geliyor.

SÖZDİZİMİ :


element.classList

Özellikleri :

length Listedeki sınıfların sayısını döndürür. Bu özellik salt okunur.

CSS Sınıfı Ekleme


Belirtilen sınıf değerleri ekleyin. Bu sınıflar öğenin özniteliğinde zaten varsa, yok sayılırlar.

ÖRNEK:

Deneme sınıfını ekleyin.


document.querySelector('#el').classList.add('deneme');

Birden fazla sınıf ekleyelim. Deneme ve test sınıfını ekleyelim.


document.querySelector('#el').classList.add('deneme', 

'test');

Not :Aynı sınıflardan biri zaten mevcutsa, tekrar eklenmeyecektir.

CSS Sınıfını Silme


Belirtilen sınıf isimleri siler.

ÖRNEK:

Deneme sınıfını silin.


document.querySelector('#el').classList.remove('deneme');

Birden fazla sınıf silelim. Deneme ve test sınıfını silelim.


document.querySelector('#el').classList.remove('deneme', 

'test');

Not: Verilen sınıflardan birinin bulunmaması durumunda bir hata vermediğini unutmayın.

Bir CSS Sınıfını Değiştirme


Bazen bir kullanıcı etkileşimine veya sitenin durumuna dayalı olarak bir sınıf ismi eklememiz veya silmemiz gerekir. Bu, aşağıda gösterildiği gibi toggle() methodu kullanarak gerçekleştirilir.

ÖRNEK:

Deneme sınıfına toggle() methodu yani geçiş efekti uygulayın.


document.querySelector('#el').classList.toggle('deneme');

//ÇIKTI: class=""

document.querySelector('#el').classList.toggle('deneme');

//ÇIKTI: class="deneme"

CSS sınıf ismini öğrenme


ClassList API'si, sınıf listesinde konumuna göre sınıf isimleri almak için bir yöntem sağlar. Diyelim ki öğemizin birinci, ikinci ve üçüncü sınıfların isimlerini öğrenmek istiyoruz. Aşağıdakileri kodları yazacağız:

ÖRNEK:


document.querySelector('#el').classList.item(0);

//ÇIKTI: return "deneme"

document.querySelector('#el').classList.item(1);

//ÇIKTI: return "test"

document.querySelector('#el').classList.item(2);

//ÇIKTI: return null

CSS sınıfların toplam sayısını öğrenme


Çok yaygın olmasa da belirli bir öğeye uygulanan sınıf sayısını bilmemiz gereken durumlar vardır. ClassList API'sı, bu numarayı aşağıda gösterildiği gibi length özelliğiyle öğrenmemizi sağlar:

ÖRNEK:


console.log(document.querySelector('#el').classList.length);

//ÇIKTI: 2

Bir Sınıfın Var olup olmadığını Belirleme.


Bazen, belirli bir sınıfın varlığına dayalı olarak belirli bir eylemi gerçekleştirmek isteyebiliriz. Testi gerçekleştirmek için contains() methodu şu şekilde kullanıyoruz:


if(document.querySelector('#el').classList.contains('test')) 

{

   // sınıf varsa kodlar buraya yaz.
   
} else {

   // sınıf yoksa kodları buraya yaz.
}

Var olan sınıfı yeni bir sınıfla değiştir.


Varolan bir sınıfı yeni bir sınıfla değiştirir.

SÖZDİZİMİ :


replace(eskisınıf,yenisınıf)

ÖRNEK:


document.querySelector('#el').classList.replace("deneme", 

"yeni")

Not: Mozilla firefox tarayıcıda çalışmakta diğer tarayıcılarda çalışıyor mu kontrol edin.

Sınıf listesini bir dizge olarak döndürme.


Sınıf listesini bir dize olarak döndürmek için, aşağıda gösterilen toString() methodu kullanabilirsiniz.

ÖRNEK:


var x = document.querySelector('#el').classList.toString();

console.log(x); //ÇIKTI:"deneme"

document.querySelector('#el').classList.add('test','makale');

var x = document.querySelector('#el').classList.toString();

console.log(x); //ÇIKTI: "deneme test makale"

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

3901

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.