İhtiyari Dersler

Kurs Önerileri:

Tanım ve Kullanım HTML DOM Element classList Özelliği

Tanım ve Kullanım Özelliği elemanın CSS sınıf adlarını döner.

classList

classList özelliği DOMTokenList döner.

Örnek

const list = element.classList;
Örnek 1

Kişisel Deneyimleyin

"myStyle" sınıfını elemana ekler:

Örnek 2

const list = element.classList;
"myStyle" sınıfını elemandan kaldır:

Kişisel Deneyimleyin

Örnek 3

"myStyle" açılıp kapanmasını değiştir:

const list = element.classList;
list.toggle("myStyle");

Kişisel Deneyimleyin

İpucu:Daha fazla örnek, sayfanın altında bulunabilir.

Sözdizimi

element.classList

Dönüş değeri

Tür Tanım
Nesne DOMTokenList. Elemanın sınıf adları listesi.

Not:classList özelliği yalnızca okunabilir, ancak aşağıda listelenen yöntemleri kullanarak CSS sınıflarını ekleyebilir, değiştirebilir veya silebilirsiniz:

classList özellikleri ve yöntemleri

İsim Tanım
add() Bir veya daha fazla token ekler.
contains() Liste sınıf içeriyorsa true döner.
entries() Listeden anahtar/değer çifti içeren bir döngü oluşturur.
forEach() Listedeki her token için geri çağrı fonksiyonu çalıştır.
item() Belirtilen indeksteki tokeni döndür.
keys() Listedeki anahtarların içerdiğini döndüren bir iteraatör döndür.
length Listedeki token sayısını döndür.
remove() Listedeki bir veya daha fazla tokeni kaldır.
replace() Listedeki tokenleri değiştir.
supports() Eğer token, desteklenen özellik tokenlerinden biri ise true döndür.
toggle() Listedeki tokenler arasında geçiş yap.
value Token listesini string olarak döndür.
values() Listedeki değerlerle dönen bir iteraatör döndür.

Daha fazla örnek

Örnek 4

Bir elemente çok sınıf ekleyin:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Kişisel Deneyimleyin

Örnek 5

Bir elementten çok sınıfı silin:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Kişisel Deneyimleyin

Örnek 6

Elementin kaç tane sınıfı var?

let numb = element.classList.length;

Kişisel Deneyimleyin

Örnek 7

"myDIV" elementinin sınıflarını alın:

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Kişisel Deneyimleyin

Örnek 8

Bir elementin ilk sınıfını alın:

let className = element.classList.item(0);

Kişisel Deneyimleyin

Örnek 9

Element "myStyle" sınıfına mı sahip?

let x = element.classList.contains("myStyle");

Kişisel Deneyimleyin

Örnek 10

Eğer element "myStyle" sınıfına sahipse "anotherClass"'ı silin:

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Kişisel Deneyimleyin

Örnek 11

Aşağıdaki sınıflar arasında geçiş yaparak açılır menü düğmesi oluşturun:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Kişisel Deneyimleyin

Örnek 12

Keskin Navigasyon Çubuğu Oluşturma:

// Navigasyon çubuğunu alın
const navbar = document.getElementById("navbar");
// Navigasyon çubuğunun konumunu alın
const sticky = navbar.offsetTop;
// Sizin kaydırma konumunuza ulaştığınızda sticky sınıfını navigasyon çubuğuna ekleyin
// Kaydırma konumundan ayrıldığında onu kaldırın
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Kişisel Deneyimleyin

Tarayıcı Desteği

Tüm tarayıcılar destekler element.classList：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 9-11 Destek Destek Destek Destek

İlgili Sayfalar

CSS Eğitimi:CSS Grammar

CSS Referans Kılavuzu:CSS .class Seçici

DOMTokenList Nesnesi

className Özelliği

getElementsByClassName() Metodu

HTML DOM Style Nesnesi