Jak przełączać klasę za pomocą czystego JavaScript w HTML?

Przełączanie klasy za pomocą czystego JavaScript w HTML jest przydatne, gdy chcesz zmienić wygląd elementu na podstawie określonego warunku, takiego jak interakcja użytkownika. Na przykład zmiana koloru tła strony lub przycisku podczas zdarzenia kliknięcia. Aby przełączyć klasę, umożliwia dynamiczne wprowadzanie zmian, bez konieczności odświeżenia strony. Może to pomóc zwiększyć wrażenia użytkownika, dzięki czemu zmiany są bardziej płynne i bardziej responsywne.

Ten post ilustruje procedurę przełączania klasy za pomocą JavaScript.

Jak przełączać klasę CSS za pomocą czystego JavaScript w HTML?

Do przełączania klas za pomocą czystego JavaScript, użyj „przełącznik()„Metoda„Lista klas„Atrybut/właściwość. Metoda toggle () akceptuje nazwę klasy jako parametr. Przełączenie klasy oznacza przełączanie obecności klasy na elemencie w HTML. Polega na sprawdzeniu, czy klasa jest obecna na elemencie, a jeśli tak, usuwanie. Jeśli klasa nie jest przypisana do elementu, jest dodawana.

Przykład 1: Zmień kolor elementu według klasy przełączania za pomocą czystego JavaScript w HTML
W poniższym przykładzie zmienimy kolor tła przycisku na przycisku Kliknij, przełączając klasę.

Najpierw utwórz przycisk i przypisz identyfikator „Btn„Aby stylizować przycisk. Dołącz „na kliknięcie„Wydarzenie, które wywoła„classtoggle ()„Funkcja przycisku Kliknij:

Przycisk

W pliku CSS utwórz identyfikator „Btn„Do stylizacji przycisku:

#BTN
Wyściółka: 3px;
Margines: 2px;
Font-Family: Sans-Serif;
Radiusz graniczny: .5rem;

Utwórz klasę o nazwie „żółty„Aby ustawić kolor tła elementu:

.żółty
kolor tła: żółty;

W pliku JavaScript zdefiniuj funkcję „classtoggle ()„To zadzwoni„przełącznik()„Metoda„Lista klas„Właściwość do przełączania klasa przycisków:

funkcja clasStoggle ()
dokument.getElementById („BTN”).Lista klas.przełącz („żółty”);

Jak widać na wyjściu podczas klikania przycisku, kolor tła zmienia się, wskazuje, że „żółty„Klasa została pomyślnie przypisana do przycisku za pomocą„przełącznik()„Metoda„Lista klas" nieruchomość:

Przykład 2: Zmień czcionkę elementu według klasy przełączania za pomocą czystego JavaScript w HTML
W danym przykładzie przełączymy klasę CSS do zmiany tekstu w wydarzeniu kliknięcia przycisku.

W pliku HTML utwórz

tag, aby wyświetlić tekst i przycisk. Przypisz identyfikator „Witamy”Do tekstu, który pomaga uzyskać tekst i przypisać klasę za pomocą metody przełączania:

Witamy w Linuxhint

Kliknij

Utwórz klasę CSS „tekst„To zmieni kolor i rozmiar czcionki tekstu:

.tekst
Rozmiar czcionki: 30px;
Kolor: #06b5f5;

Zdefiniuj funkcję „classtoggle ()”Aby przypisać klasę„tekst" do

Element znacznika na przycisku kliknij, który zostanie pobrany za pomocą przypisanego identyfikatora za pomocą „getElementById ()" metoda.

funkcja clasStoggle ()
dokument.GetElementById („Welcome”).Lista klas.przełącz („tekst”);

Widać, że „tekst„Klasa jest przypisana do danego tekstu, klikając przycisk:

Zapewniliśmy wszystkie podstawowe instrukcje dotyczące przełączania klasy za pomocą czystego JavaScript w HTML.

Wniosek

Aby przełączyć klasę za pomocą czystego JavaScript w HTML, użyj „przełącznik()„Metoda„Lista klas" nieruchomość. Pomaga przypisać klasę do elementu, jeśli jest do niej przypisana. Ten post ilustruje procedurę przełączania klas za pomocą JavaScript.