JavaScript classList to właściwość DOM języka JavaScript, która umożliwia stylizowanie klas CSS (kaskadowego arkusza stylów) elementu. JavaScript classList to właściwość tylko do odczytu, która zwraca nazwy klas CSS. Jest to właściwość JavaScript w odniesieniu do innych właściwości JavaScript, które obejmują styl i nazwę klasy. Właściwość style zwraca kolor lub inny styl elementu klasy CSS, a className służy do zwracania nazw klas używanych w pliku CSS. Jednak właściwości className i classList zwracają nazwy klas, których użyliśmy w pliku CSS, ale na różne sposoby. Właściwość className zwraca nazwę klas w postaci ciągu znaków, natomiast właściwość classList JavaScript zwraca nazwę klas w postaci tablicy.

W tym miejscu omówimy krótko JavaScript classList, a także omówimy jego metody wraz z ich praktycznymi implementacjami.

Przykład właściwości classList JavaScript

Poniżej znajduje się przykład właściwości JavaScript classList, dzięki której otrzymamy wartość klasy elementu.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

Wynik powyższego kodu pokazano poniżej:

Właściwość listy klas JavaScript

Właściwość classList służy do reprezentowania wartości elementów klasy, którymi jest a DOMTokenList obiekt. Jest to właściwość tylko do odczytu, ale możemy modyfikować jej wartość, manipulując klasami używanymi w programie. Właściwość JavaScript classList składa się z następujących metod, za pomocą których możemy wykonywać różne operacje na elementach klasy:

dodać():Metoda add() służy do dodawania jednej lub większej liczby klas do elementu.usunąć():Metoda usuwania() służy do usuwania jednej lub większej liczby klas z liczby klas występujących w elemencie.przełącznik():Metoda toggle() służy do przełączania określonych nazw klas elementu. Oznacza to, że jednym kliknięciem określona klasa zostanie dodana, a kolejnym kliknięciem klasa zostanie usunięta. Nazywa się to właściwością przełączającą elementu.zastępować():Metoda zamiany() służy do zastępowania istniejącej klasy nową klasą.zawiera():Metoda zawiera() właściwości classList języka JavaScript służy do zwracania wartości logicznej jako wyniku. Jeżeli klasa jest obecna, zwracana jest wartość true, w przeciwnym razie zwracana jest wartość false.przedmiot():Do wyświetlenia nazw klas w danym indeksie służy metoda item(). W ten sposób zwraca nazwę klasy.

Oto niektóre z metod używanych w klasie JavaScript.

Omówimy jeden po drugim.

lista klas.add()

Funkcja służąca do dodawania jednej lub większej liczby klas do elementu CSS.

Przykład:

Poniższy przykład pokazuje jak dodać klasę za pomocą metody classList.add():

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

W kodzie, gdy użytkownik kliknie przycisk, nowa klasa zostanie dodana do istniejących klas. Wynik po kliknięciu przycisku pokazano poniżej:

pętla do i while w Javie

lista klas.usuń()

Funkcja usuwania() służy do usuwania istniejących klas z elementów.

Poniższy przykład pokazuje, jak usunąć jedną lub więcej klas za pomocą metody classlist.remove():

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

W powyższym kodzie, gdy użytkownik kliknie przycisk, konkretna określona klasa zostanie usunięta z istniejących klas CSS. Wynik po kliknięciu przycisku pokazano poniżej:

Lista klas.toggle()

Przycisk toggle() służy do przełączania klas do elementu. Oznacza to dodanie nowej klasy lub usunięcie istniejących klas.

Poniżej znajduje się przykład, który pomoże nam zrozumieć, jak używać metody toggle() do dodawania lub usuwania klas.

Przykład:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

W kodzie, gdy użytkownik kliknie przycisk, klasa zostanie dodana lub usunięta z klas CSS. Wynik po kliknięciu przycisku pokazano poniżej:

Lista klas.zawiera()

Metoda zawiera() służy do sprawdzenia, czy podana klasa istnieje w klasach CSS i w odniesieniu do niej zwraca wartość logiczną jako true lub false.

Poniżej znajduje się przykład pokazujący, jak wyszukać klasę, jeśli istnieje lub nie, za pomocą metody zawiera():

Przykład:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

W powyższym kodzie widać, że gdy użytkownik kliknie przycisk, sprawdza, czy określona klasa jest obecna w klasach CSS. Jeśli jest obecny, zwrócona zostanie wartość logiczna jako prawdziwa. W przeciwnym razie zwróci wartość false. Wynik powyższego kodu po kliknięciu przycisku pokazano poniżej:

lista klas.replace()

Metoda zamiany() służy do zastąpienia istniejącej klasy nową. Nie oznacza to, że klasa zostanie usunięta z elementów, ale właściwości istniejącej klasy zostaną zastąpione właściwościami nowej klasy.

Poniżej znajduje się przykład, dzięki któremu zrozumiemy, w jaki sposób możemy zastąpić istniejącą klasę nową klasą:

Przykład:

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

W powyższym kodzie, gdy użytkownik kliknie przycisk, istniejące właściwości klasy zostaną zastąpione nowymi właściwościami klasy. Wynik po kliknięciu przycisku pokazano poniżej:

lista_klas.item()

Funkcja item() służy do zwrócenia nazwy klasy, która występuje pod określoną wartością indeksu.

Poniżej znajduje się przykład, który pomoże nam zrozumieć, jak używać metody item() do zwracania wartości:

Przykład:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

W kodzie, gdy użytkownik kliknie przycisk, zostanie wyświetlona klasa znajdująca się w określonym indeksie. Po kliknięciu przycisku otrzymujemy określoną wartość klasy indeksu, jak pokazano poniżej:

Oto niektóre z metod obiektu DOM classList i wszystkie informacje na temat classList.