Jak dodać aktywną klasę w JavaScript

Podczas opracowywania strony internetowej czasami kod staje się tak długi i złożony, że nie można dodawać ani usuwać identyfikatorów lub klas CSS indywidualnie. Aby poradzić sobie z takimi sytuacjami, możesz użyć JavaScript, aby dodać aktywne klasy w celu stylizacji lub do wypełnienia innych celów. JavaScript zapewnia różne metody natychmiastowego rozwiązania określonego złożonego problemu.

Ten podręcznik wyjaśni procedurę dodawania aktywnej klasy w JavaScript.

Jak dodać aktywną klasę w JavaScript?

Aby dodać aktywną klasę, zastosujemy następujące metody:

• dokument.getElementById ()
• dokument.QuerySelelect ()

Przejdźmy do pierwszej metody!

Metoda 1: Użyj dokumentu.getElementById () z klasą.Metoda dodawania (), aby dodać aktywną klasę w JavaScript

W JavaScript „The„dokument.getElementById ()„Metoda służy do uzyskania dostępu do określonego elementu według jego identyfikatora. Jednak wybiera tylko elementy na podstawie ich identyfikatorów, a nie klas. Możesz go użyć z „Lista klas.dodać()”Metoda dodawania aktywnej klasy w JavaScript.

Zbadajmy tę metodę, biorąc przykład.

Przykład

W naszym pliku HTML weźmiemy „

” tag with some text, specify its id as “tekst”I dodaj„na kliknięcie„Wydarzenie, które wywoła„Aktywuj()”Funkcja. Zauważ, że dodaj

Tag w tagu:

Naciśnij tutaj

W pliku JavaScript Zdefiniuj funkcję Active () w taki sposób, że najpierw uzyskuje dostęp do elementu akapitu za pomocą jego identyfikatora w dokumencie.metoda getelementById (). Następnie dodaj klasę CSS do listy klas do celów stylizacji:

Funkcja Activate ()
var a = dokument.getElementById („txt”);
A.Lista klas.Dodaj („newClass”);

W pliku CSS umieść kropkę przed „NewClass”I przypisz„kolor tła„Własność wartości”Pomarańczowy”:

.NewClass
kolor tła: pomarańczowy;

W rezultacie, kiedy klikniesz element akapitu, zostanie do niego zastosowana właściwość dodanej tła:

Rzućmy okiem na następującą metodę, w której użyjemy dokumentu.querySelelect (), aby dodać aktywną klasę.

Metoda 2: Użyj dokumentu.querySelelect () z klasą.Metoda dodawania (), aby dodać aktywną klasę w JavaScript

W JavaScript „The„dokument.QuerySelelect ()„Metoda jest wykorzystywana do uzyskania pierwszego elementu z kodu. Możesz określić klasy i identyfikatory zarówno w metodzie QuerySelelect (). Można go używać z „Lista klas.dodać()”Metoda dodawania aktywnej klasy w JavaScript.

Przykład

Będziemy teraz używać tylko „dokument.QuerySelelect ()”Z ID„#tekst„Aby wybrać element akapitowy. Znowu lista klasy.Metoda add () zostanie zastosowana do dodania aktywnego „NewClass”:

Funkcja Activate ()
var a = dokument.querySelelect („#txt”);
A.Lista klas.Dodaj („newClass”);

Wyjście

Nauczyliśmy się dwóch najprostszych metod dodawania aktywnej klasy w JavaScript

Wniosek

Aby dodać aktywną klasę, możemy użyć „getElementById ()" Lub "QuerySelelect ()„Z listą klasy.Metoda Add (). Obie wspomniane metody otrzymują elementy po ich identyfikatorze, a następnie za pomocą klasy klasy.Metoda add (), nowa nazwa klasy przypisana do elementu, który może być używany do celów stylizacji. Ten post opisał procedurę związaną z dodaniem aktywnej klasy w JavaScript.