Obiekt HTML DOM classList

Przykłady

Dla elementu <div>, aby dodać klasę:

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

Spróbuj »

Definicja i Wykorzystanie

Obiekt classList zwraca nazwę klasy elementu, jako przedmiot DOMTokenList.

Ta właściwość jest używana w elemencie dodawać, usuwać i przełączyć klasę CSS.

Obiekt classList jest tylko do odczytu, ale można użyć add () i zdjąć () metodę, aby go zmodyfikować.

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji nieruchomości.

nieruchomość
classList	8,0	10,0	3,6	5,1	11,5

gramatyka

Element .classList

właściwości

nieruchomość	opis
długość	Zwraca numer Lista klas Ta właściwość jest tylko do odczytu

sposób

sposób	opis
add (class1, class2, ...)	Dodaj jedną lub więcej nazw klas w elemencie. Jeśli określona nazwa klasy już istnieje, to nie doda / td>
Zawiera (klasa)	Zwraca wartość logiczną, określa się, czy obecność określonej nazwy klasy. Możliwe wartości: prawda - Pakiet element zawiera już nazwę klasy false - element nie istnieje w nazwie klasy
pozycja (index)	Zwraca nazwę klasy w wartości indeksu elementu. Wartości indeksu zaczynać od zera. Jeśli wartość indeksu jest poza zasięgiem zakresie lub null
usuń (class1, class2, ...)	Usuń jeden lub więcej elementów nazwy klasy. Uwaga: Usunięcie nazwy klasy nie istnieje, nie narzeka.
przełącznik (klasa, true \| false)	Przełączanie nazwy klas w elemencie. Pierwszym parametrem jest nazwa klasy, który chcesz usunąć ten element i zwraca fałsz. Jeśli nazwa klasa nie istnieje, doda nazwy klas w elemencie i zwraca true. Drugi parametr jest opcjonalny jest wartość logiczna, która jest używana do określenia, czy element jest obowiązkowy, aby dodać lub usunąć kategorie, bez względu na nazwę klasy istnieje. Na przykład: Usuwanie elementu .classList.toggle Klasa: ( "classToRemove" , false); Dodaj klasę: Element .classList.toggle ( "classToAdd" , true); Uwaga: Internet Explorer lub Opera 12 i wcześniejsze wersje nie obsługują drugi parametr.

Opis techniczny

Zwraca:	DOMTokenList, klasa lista nazwa zawiera elementy

Więcej przykładów

Przykłady

Dla elementu <div>, aby dodać więcej kategorii:

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

Spróbuj »

Przykłady

Usuń klasę dla elementu <div>:

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

Spróbuj »

Przykłady

Dla elementu <div>, aby usunąć wiele klas:

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

Spróbuj »

Przykłady

Dla elementu <div>, aby przełączyć kategorie:

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

Spróbuj »

Przykłady

Pobierz nazwa klasy elementu <div>:

<Div id = "myDiv" class = "mystyle anotherClass thirdClass"> Jestem elementu div </ div>

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

x Wyjście jest:

mystyle anotherClass thirdClass

Spróbuj »

Przykłady

Patrz <div> ma kilka nazw klas:

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

x Wyjście jest:

Spróbuj »

Przykłady

Uzyskaj <div> w pierwszej nazwy klasy (indeks 0):

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

x Wyjście jest:

mystyle

Spróbuj »

Przykłady

Zobacz elementu istnieje kategoria "mystyle":

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

x Wyjście jest:

prawdziwy

Spróbuj »

Przykłady

Zobacz elementu istnieje kategoria "mystyle", jeśli jest obecny Usuń inna nazwa klasy:

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

if (x.classList.contains ( "mystyle") ) {
x.classList.remove ( "anotherClass");
} Else {
alert ( "Nie udało się go znaleźć. ");
}

Spróbuj »