İhtiyari Dersler
- Önceki Sayfa children
- Sonraki Sayfa className
- Üst Katmana Geri Dön HTML DOM Elements nesnesi
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
"myStyle" sınıfını elemana ekler:
Örnek 2
const list = element.classList; "myStyle" sınıfını elemandan kaldır:
Örnek 3
"myStyle" açılıp kapanmasını değiştir:
const list = element.classList; list.toggle("myStyle");
İ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");
Örnek 5
Bir elementten çok sınıfı silin:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Örnek 6
Elementin kaç tane sınıfı var?
let numb = element.classList.length;
Ö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;
Örnek 8
Bir elementin ilk sınıfını alın:
let className = element.classList.item(0);
Örnek 9
Element "myStyle" sınıfına mı sahip?
let x = element.classList.contains("myStyle");
Örnek 10
Eğer element "myStyle" sınıfına sahipse "anotherClass"'ı silin:
if (element.classList.contains("mystyle")) { element.classList.remove("anotherClass"); }
Ö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"); }
Ö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"); } }
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
- Önceki Sayfa children
- Sonraki Sayfa className
- Üst Katmana Geri Dön HTML DOM Elements nesnesi