HTML DOM classList Propery

<Eleman Nesne

Örnek

Ekle "mystyle" a sınıfını <div> elemanı:

document.getElementById("myDIV").classList.add("mystyle");

Kendin dene "

Daha "Try it Yourself" Aşağıdaki örnekler.

Tanımı ve Kullanımı

Classlist özelliği sınıfı döner name(s) , bir DOMTokenList amaç olarak, bir elementin.

Bu nitelik bir elemanın CSS sınıfları ekleyebilir, çıkartabilir ve geçiş yapmak için yararlıdır.

Classlist özelliği salt okunur Ancak, kullanarak değişiklik yapabilirsiniz add() ve remove() yöntemleri.

Çapraz tarayıcı çözüm: classlist mülkiyet IE9 desteklenen ve önceki edilmez. Ancak, kullanabileceğiniz className (bkz çapraz tarayıcı çözüm için özelliği veya normal ifadeler "More Examples" Bu sayfanın alt kısmında).

Tarayıcı Desteği

Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.

özellik
classList	8	10.0	3.6	5.1	11.5

Sözdizimi

element .classList

Özellikleri

özellik	Açıklama
length	Sayısını döndürür listesinde sınıflar. Bu özellik salt okunur

Yöntemler

Yöntem	Açıklama
add( class1, class2, ... )	Bir elemanın bir veya daha fazla sınıf isimleri ekler. Belirtilen sınıf zaten mevcutsa, sınıf eklenmeyecek
contains( class )	Bir öğe belirtilen sınıf adı alıp belirten bir Boole değeri döndürür. Olası değerler: Gerçek - eleman belirtilen sınıf adını içerir false - Belirtilen sınıf adını içermiyor eleman
item( index )	Bir elemanın bir Belirtilen dizin numarası ile sınıf adını döndürür. Dizin 0'dan başlar. Dizin aralık dışındaysa yoksa boş sonucunu döndürür
remove( class1, class2, ... )	Bir elemanın bir veya daha fazla sınıf isimleri kaldırır. Not: var olmayan bir sınıf çıkarma, bir hata atmak DEĞİLDİR
toggle( class, true\|false)	bir eleman için bir sınıf adı arasında geçiş yapar. Birinci parametre, bir elemandan belirtilen sınıf kaldırır ve yanlış döndürür. sınıf yok, bu elemana eklenir ve dönüş değeri doğrudur. İsteğe bağlı ikinci parametre sınıfı olursa olsun zaten var olup olmadığına, eklenen veya kaldırılacak zorlayan bir Boole değeridir. Örneğin: Eleman .classList: Bir sınıf kaldırın. toggle("classToRemove", false) ; Eleman .classList: Bir sınıf ekleme. toggle("classToAdd", true) ; Not: İkinci parametre Internet Explorer'da desteklenen ya da Opera 12 ve önceki edilmez.

Teknik detaylar

Geri dönüş değeri:	Sınıfının bir listesini ihtiva eden bir DOMTokenList, name(s) bir elemanının

Diğer Örnekler

Örnek

Bir çoklu sınıfları ekleyin <div> elemanı:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

Kendin dene "

Örnek

Bir gelen bir sınıf kaldırma <div> elemanı:

document.getElementById("myDIV").classList.remove("mystyle");

Kendin dene "

Örnek

Bir birden fazla sınıfları çıkarın <div> elemanı:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

Kendin dene "

Örnek

Bir için iki sınıf arasında geçiş <div> elemanı:

document.getElementById("myDIV").classList.toggle("newClassName");

Kendin dene "

Örnek

Sınıf alın name(s) a ait <div> elemanı:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;

X'in sonucu olacaktır:

mystyle anotherClass thirdClass

Kendin dene "

Örnek

Bir kaç sınıf isimleri öğrenin <div> öğesi vardır:

var x = document.getElementById("myDIV").classList.length;

X'in sonucu olacaktır:

Kendin dene "

Örnek

Birinci sınıf adını alın (index 0) a <div> elemanı:

var x = document.getElementById("myDIV").classList.item(0);

X'in sonucu olacaktır:

mystyle

Kendin dene "

Örnek

Bir öğe varsa öğrenin "mystyle" sınıfı:

var x = document.getElementById("myDIV").classList.contains("mystyle");

X'in sonucu olacaktır:

true

Kendin dene "

Örnek

Bir öğe varsa öğrenin "mystyle" sınıfı. Eğer öyleyse, başka sınıf adını kaldırın:

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}

Kendin dene "

Örnek

bir açılan düğmesi oluşturmak için sınıflar arasında geçiş yapma:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

Kendin dene "

Yedek Örnek: ekleme

Bir çapraz tarayıcı çözeltisi classlist kullanıldığında. add() IE9 ve önceki yöntemi,:

var x = document.getElementById("myDIV");

if (x.classList) {
x.classList.add("mystyle");
} else {
x.className = "mystyle"; // For IE9 and earlier
}

Kendin dene "

Yedek Örnek: kaldırma

Bir çapraz tarayıcı çözeltisi classlist kullanıldığında. remove() IE9 ve önceki sürümler için, yöntem:

var x = document.getElementById("myDIV");

if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9 and earlier
}

Kendin dene "

Yedek Örnek: içermektedir

Bir çapraz tarayıcı çözeltisi classlist kullanıldığında. contains() IE9 ve önceki yöntem:

var x = document.getElementById("myDIV");

if (x.classList) {
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
}

Kendin dene "

Yedek Örnek: mafsallı

Bir çapraz tarayıcı çözeltisi classlist kullanıldığında. toggle() IE9 için yöntem:

var x = document.getElementById("myDIV");

if (x.classList) {
    x.classList.toggle("mystyle");
} else {
    // For IE9
    var classes = x.className.split(" ");
    var i = classes.indexOf("mystyle");

    if (i >= 0)
        classes.splice(i, 1);
    else
        classes.push("mystyle");
        x.className = classes.join(" ");
}

Kendin dene "