Lista klas JavaScript | Wyjaśnione

Funkcja DOM JavaScript o nazwie „Lista klas”Można użyć do stylizowania klas CSS elementu CSS. Jest to właściwość JavaScript tylko do odczytu, która jest używana do przedstawienia informacji zawartych w właściwości klasy elementu. Mówiąc dokładniej, nazwy klas CSS są zwracane przez nazywaną listę klasy.

Ten zapis ilustruje właściwość JavaScript klasy klasy i jej zastosowania w JavaScript.

Co to jest klasa w JavaScript?

„„Lista klas”To atrybut tylko odczytu JavaScript DOM reprezentujący dane we właściwości klasy elementu. Podaje nazwy klas CSS jako wyjściowe. Pomimo tego, że jest tylko odczyt, lista klas może być nadal używana do zmiany klas. Ponadto możesz zmodyfikować klasy CSS podane elementowi HTML za pomocą obiektu LLIST Class.

Składnia

Postępuj zgodnie z podaną składnią, aby użyć atrybutu listy klasy:

element.Lista klasy;

Tutaj "element”Jest elementem HTML.

Przykład

W tym przykładzie utworzymy przycisk, przypisując klasę o nazwie „przycisk”I dołącz do niego zdarzenie onClick (), które wyświetli nazwy przypisanej klasy do przycisku po uruchomieniu:

Kliknij, aby wyświetlić przypisaną klasę do przycisku

Kliknij tutaj

Teraz ustawimy promień graniczny przycisku jako „2 cm”W pliku CSS:

.przycisk
Radiusz graniczny: 2 cm;

Połączymy arkusz stylów z plikiem HTML za pomocą „”Tag:

W pliku JavaScript zdefiniuj funkcję „ButtonClick ()”W taki sposób, że po powołaniu się na to, po pierwsze, dokument.getelementById () przycisk dostępu do metody za pomocą jego identyfikatora, a następnie wyświetl przypisaną klasę do przycisku w metodzie alert ():

funkcja ButtonClick ()
var click = dokument.getElementById („btn”);
Alert (kliknij.Lista klasy);

Wyjście

Sprawdźmy metody właściwości JavaScript Class Classcript.

Jakie są metody właściwości klasy klasy?

Istnieją pewne metody właściwości listy klasowej:

• dodać()
• usunąć()
• przełącznik()
• zawiera()
• przedmiot()
• zastępować()

Poniższa tabela zawiera opis wymienionych metod:

Metody	Opis
dodać()	Możesz dodać jedną lub więcej klas do elementu za pomocą metody add ().
usunąć()	Aby wyeliminować klasy z listy klas elementu, użyj metody remove ().
przełącznik()	Przełączanie poszczególnych nazw klas elementu odbywa się za pomocą metody toggle (). Określona klasa jest dodawana jednym kliknięciem, a klasa jest usuwana za pomocą kolejnego kliknięcia.
zawiera()	Aby sprawdzić, czy dana klasa istnieje w elemencie, czy nie, użyj metody zawierającej ().
przedmiot()	Służy do pokazywania nazw klas, które są obecne w określonym indeksie.
zastępować()	Istniejąca klasa może zostać zastąpiona nową klasą przy użyciu metody zastępczej ().

Teraz omówimy niektóre powszechnie stosowane metody listy klasy.

Przykład 1: Jak używać metody add () właściwości listy klasy?

Dodamy nowe klasy w przycisku, klikając nowe „Dodaj klasę do przycisku”:

Dodaj klasę do przycisku

Następnie utwórz dwie klasy „Btncolor" I "pogrubiony tekst„To doda kolor przycisków w tle i odważnie tekst przycisku:

.btncolor
kolor tła: blueviolet;

.pogrubiony tekst
Font-Weight: Bold;

W pliku JavaScript zdefiniuj funkcję o nazwie „addClass ()„To zadzwoni„dodać()„Metoda listy klasowej o nazwie klasy jako argumentu dodanej w klasie przycisku:

funkcja addClass ()
var newClass = Dokument.getElementById („BTN”).Lista klasy;
NewClass.add („btncolor”);
NewClass.add („BoldText”);

Wyjście wskazuje, że nowe klasy są dodawane do przycisku „Kliknij tutaj" Kiedy "Dodaj klasę do przycisku”Kliknie. Następnie kliknij „Kliknij tutaj”Przycisk do wyświetlenia listy klas:

Przykład 2: Jak użyć metody remove () właściwości listy klasy?

Teraz usuniemy klasę z listy. Aby to zrobić, utworzymy nowy przycisk ”Usuń klasę z przycisku”I załącz z nim wydarzenie OnClick ():

Usuń klasę z przycisku

Zdefiniujemy funkcję „resuseClass ()”W pliku JavaScript w celu usunięcia klasy„Btncolor„Z listy klas:

Funkcja resusyClass ()
var newClass = Dokument.getElementById („BTN”).Lista klasy;
NewClass.usuń („btncolor”);

Jak widać na wyjściu, „Kliknij tutaj”Przycisk wyświetlony jedna klasa o nazwie„przycisk”A potem„ kiedy ”Dodaj klasę do przycisku”Jest kliknięte, dwie nowe klasy”pogrubiony tekst" I "Btncolor”Są dodawane do listy, a kolor tła przycisku jest również zmieniany. Wreszcie kliknięcie „Usuń klasę z przycisku”Usunie„Btncolor„Klasa z listy:

Przykład 3: Jak używać metody właściwości listy klasy klasy?

Teraz użyjemy metody Toggle () do przełączania listy klas za jednym kliknięciem i usunie się po innym kliknięciu:

Przycisk przełączania

W pliku JavaScript zdefiniuj funkcję „toggleClass ()„To najpierw doda kolor przycisku za jednym kliknięciem, a następnie usunie go na drugim kliknięciu:

funkcja toggleClass ()
var newClass = Dokument.getElementById („BTN”).Lista klasy;
NewClass.przełącz („btncolor”);

Odpowiednie wyjście jest następujące:

Wszystkie podstawowe wytyczne dotyczące posiadłości JavaScript Classcript zostały objęte.

Wniosek

„„Lista klas”Jest atrybutem JavaScript tylko do odczytu, który podaje nazwy klas CSS przypisanych do elementu HTML. Pozwala na zmianę klas CSS za pomocą jego predefiniowanych metod, w tym add (), remove (), toggle () i tak dalej. W tym zapisie zilustrowaliśmy właściwość JavaScript klasy klasy i jej metody ze szczegółowymi przykładami.