HTML DOM classList Propery

<Element Przedmiot

Przykład

Dodaj "mystyle" klasę do <div> element:

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

Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

Właściwość classList zwraca klasy name(s) elementu, w DOMTokenList obiektu.

Ta właściwość jest przydatna do dodawania, usuwania i przełączania klas CSS na elemencie.

Nieruchomość classList jest tylko do odczytu, jednak można go zmodyfikować za pomocą add() i remove() metody.

Rozwiązanie cross-browser: Właściwość classList nie jest obsługiwana w IE9 i wcześniej. Jednakże, można użyć className własności lub wyrażeń regularnych rozwiązania cross-browser (patrz "More Examples" na dole tej strony).

Wsparcie przeglądarka

Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.

Nieruchomość
classList	8.0	10,0	3.6	5.1	11,5

Składnia

element .classList

Nieruchomości

Nieruchomość	Opis
length	Zwraca liczbę klas w liście. Ta właściwość jest tylko do odczytu

metody

metoda	Opis
add( class1, class2, ... )	Dodaje jeden lub więcej nazw klas do elementu. Jeśli określona klasa już istnieją, klasa nie zostanie dodany
contains( class )	Zwraca wartość logiczną, co wskazuje, czy element ma określoną nazwą klasy. Możliwe wartości: prawda - element zawiera Określona nazwa klasy false - element nie zawiera podaną nazwę klasy
item( index )	Zwraca nazwę klasy z określonym numerem indeksu z elementu. Indeks zaczyna się od 0. Zwraca null, jeśli indeks znajduje się poza zasięgiem
remove( class1, class2, ... )	Usuwa jedną lub więcej nazw klasy z elementu. Uwaga: Usunięcie klasę, która nie istnieje, nie wyrzuca błąd
toggle( class, true\|false)	Przełączenie pomiędzy nazwą klasy dla elementu. Pierwszy parametr usuwa określonej klasy od elementu i zwraca fałsz. Jeśli klasa nie istnieje, jest on dodawany do elementu, a wartość zwracaną jest prawda. Opcjonalny drugi parametr jest wartością logiczną, która zmusza klasa być dodawane lub usuwane, niezależnie od tego, czy już istniał. Na przykład: Usuń klasę: Element .classList. toggle("classToRemove", false) ; Dodaj klasę: Element .classList. toggle("classToAdd", true) ; Uwaga: drugi parametr nie jest obsługiwany w przeglądarce Internet Explorer lub Opera 12 i wcześniej.

Szczegóły techniczne

Zwracana wartość:	DOMTokenList zawierający listę klasy name(s) elementu

Więcej przykładów

Przykład

Dodaj wiele klas do <div> element:

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

Spróbuj sam "

Przykład

Usuń klasę z <div> element:

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

Spróbuj sam "

Przykład

Usuń wiele klas z <div> element:

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

Spróbuj sam "

Przykład

Przełączanie pomiędzy dwoma klasami dla <div> element:

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

Spróbuj sam "

Przykład

Pobierz klasy name(s) o <div> element:

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

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

Wynikiem X będzie:

mystyle anotherClass thirdClass

Spróbuj sam "

Przykład

Dowiedzieć się, ile nazw Class A <div> element ma:

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

Wynikiem X będzie:

Spróbuj sam "

Przykład

Zdobyć pierwszy nazwę klasy (index 0) o <div> element:

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

Wynikiem X będzie:

mystyle

Spróbuj sam "

Przykład

Dowiedzieć się, czy element ma "mystyle" klasę:

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

Wynikiem X będzie:

true

Spróbuj sam "

Przykład

Dowiedzieć się, czy element ma "mystyle" klasę. Jeśli tak, usuń inną nazwę klasy:

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

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

Spróbuj sam "

Przykład

Przełączać się pomiędzy klasami, aby utworzyć przycisk rozwijane:

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

Spróbuj sam "

Zastępczy przykład dodaj

Rozwiązanie cross-browser podczas korzystania z classList. add() metodę, dla IE9 i wcześniejszych:

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

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

Spróbuj sam "

Zastępczy Przykład: usunąć

Rozwiązanie cross-browser podczas korzystania z classList. remove() sposobu, IE9 i wcześniejszych

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

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

Spróbuj sam "

Zastępczy Przykład: zawiera

Rozwiązanie cross-browser podczas korzystania z classList. contains() sposobu, IE9 i wcześniejszych

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

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

Spróbuj sam "

Zastępczy Przykład: Przełącznik

Rozwiązanie cross-browser podczas korzystania z classList. toggle() metoda, w 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(" ");
}

Spróbuj sam "