HTML DOM classList Propery

<Element Object

Exemplu

Adăugați "mystyle" clasa de la un <div> Element:

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

Încearcă - l singur »

Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.

Definiție și utilizare

Proprietatea classList returnează clasei name(s) al unui element, ca obiect DOMTokenList.

Această proprietate este util pentru a adăuga, elimina și comuta clase CSS pe un element.

Proprietatea classList este read-only, cu toate acestea, o puteți modifica folosind add() și remove() metode.

Soluție cross-browser: Proprietatea classList nu este acceptat în IE9 și mai devreme. Cu toate acestea, puteți utiliza ClassName proprietate sau expresii regulate pentru o soluție cross-browser ( a se vedea "More Examples" de pe partea de jos a acestei pagini).

Suport pentru browser-

Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.

Proprietate
classList	8	10.0	3.6	5.1	11.5

Sintaxă

element .classList

Proprietăți

Proprietate	Descriere
length	Returnează numărul de clase în lista. Această proprietate este read-only

metode

Metodă	Descriere
add( class1, class2, ... )	Adaugă unul sau mai multe nume de clasă la un element. În cazul în care există deja clasa specificată, nu va fi adăugată clasa
contains( class )	Returnează o valoare boolean, care indică dacă un element are numele clasei specificat. Valori posibile: adevărat - elementul conține numele clasei specificat fals - elementul nu conține numele clasei specificat
item( index )	Returnează numele clasei cu un număr de index specificat de la un element. Indicele începe de la 0. Returnează nul în cazul în care indicele este în afara intervalului
remove( class1, class2, ... )	Elimină una sau mai multe nume de clasă de la un element. Notă: Eliminarea unei clase care nu există, nu aruncă o eroare
toggle( class, true\|false)	Comută între un nume de clasă pentru un element. Primul parametru elimină clasa specificat de la un element, și returnează false. În cazul în care clasa nu există, se adaugă la elementul, iar valoarea returnată este adevărată. Al doilea parametru opțional este o valoare boolean care forțează clasa urmează să fie adăugate sau eliminate, indiferent dacă sunt sau nu a existat deja. De exemplu: Eliminați o clasă: element de .classList. toggle("classToRemove", false) ; Adăugați o clasă: element de .classList. toggle("classToAdd", true) ; Notă: Al doilea parametru nu este acceptat în Internet Explorer sau Opera 12 și versiunile anterioare.

Detalii tehnice

Întoarcere Valoare:	Un DOMTokenList, care conține o listă a clasei name(s) al unui element

Mai multe exemple

Exemplu

Adăugați mai multe clase de la un <div> Element:

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

Încearcă - l singur »

Exemplu

Eliminați o clasă dintr - un <div> Element:

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

Încearcă - l singur »

Exemplu

Eliminați mai multe clase dintr - un <div> Element:

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

Încearcă - l singur »

Exemplu

Comutare între două clase pentru un <div> Element:

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

Încearcă - l singur »

Exemplu

Ia clasa name(s) dintr - un <div> Element:

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

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

Rezultatul x va fi:

mystyle anotherClass thirdClass

Încearcă - l singur »

Exemplu

Aflați cât de multe nume de clase un <div> element are:

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

Rezultatul x va fi:

Încearcă - l singur »

Exemplu

Ia primul nume de clasă (index 0) dintr - un <div> Element:

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

Rezultatul x va fi:

mystyle

Încearcă - l singur »

Exemplu

Aflați dacă un element are o "mystyle" clasă:

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

Rezultatul x va fi:

true

Încearcă - l singur »

Exemplu

Aflați dacă un element are o "mystyle" de clasă. Dacă da, eliminați un alt nume de clasă:

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

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

Încearcă - l singur »

Exemplu

Comuta între clase pentru a crea un buton drop-down:

// 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');
      }
    }
}
}

Încearcă - l singur »

Exemplu fallback: adăugați

O soluție cross-browser-ul atunci când se utilizează classList. add() metoda, pentru IE9 și mai devreme:

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

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

Încearcă - l singur »

Exemplu fallback: îndepărtați

O soluție cross-browser-ul atunci când se utilizează classList. remove() metoda, pentru IE9 și mai devreme:

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

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

Încearcă - l singur »

Fallback Exemplu: conține

O soluție cross-browser-ul atunci când se utilizează classList. contains() metoda, pentru IE9 și mai devreme:

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

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

Încearcă - l singur »

Fallback Exemplu: comutare

O soluție cross-browser-ul atunci când se utilizează classList. toggle() metoda, pentru IE9:

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(" ");
}

Încearcă - l singur »