Ten podręcznik wyjaśni procedurę dodawania aktywnej klasy w JavaScript.
Jak dodać aktywną klasę w JavaScript?
Aby dodać aktywną klasę, użyjemy następujących metod:
Przejdźmy do pierwszej metody!
Metoda 1: Użyj metody document.getElementById() z metodą classList.add(), aby dodać aktywną klasę w JavaScript
W JavaScript element „ document.getElementById() Metoda ” służy do uzyskania dostępu do określonego elementu poprzez jego id. Jednak wybiera tylko elementy na podstawie ich identyfikatorów, a nie klas. Możesz go użyć z „ classList.add() ” metoda dodawania aktywnej klasy w JavaScript.
Przyjrzyjmy się tej metodzie na przykładzie.
Przykład
W naszym pliku HTML weźmiemy „ ” z jakimś tekstem, podaj jego id jako „ tekst ” i dodaj „ na kliknięcie ” zdarzenie, które wywoła „ Aktywuj() funkcja. Pamiętaj, że dodaj tag
w tagu
: < numer identyfikacyjny = 'tekst' na kliknięcie = 'Aktywuj()' > Naciśnij tutaj p >W pliku JavaScript zdefiniuj funkcję Activate() w taki sposób, aby najpierw uzyskiwała dostęp do elementu akapitu przy użyciu jego identyfikatora w metodzie document.getElementbyId(). Następnie dodaj klasę CSS do jej listy klas w celu stylizacji:
aktywacja funkcji ( ) {
tam jest = dokument. getElementById ( 'tekst' ) ;
a. lista klas . Dodaj ( „nowa klasa” ) ;
}
W pliku CSS umieść kropkę przed „ nowa klasa ” i przypisz „ kolor tła ” właściwość wartość ” Pomarańczowy ”:
. nowa klasa {tło - kolor : Pomarańczowy ;
}
W rezultacie, gdy klikniesz element akapitu, dodana właściwość tła zostanie do niego zastosowana:
Przyjrzyjmy się poniższej metodzie, w której użyjemy document.querySelector(), aby dodać aktywną klasę.
Metoda 2: Użyj metody document.querySelector() z metodą classList.add(), aby dodać aktywną klasę w JavaScript
W JavaScript element „ document.querySelector() Metoda ” służy do pobrania pierwszego elementu z kodu. Klasy i identyfikatory można określić zarówno w metodzie querySelector(). Może być używany z „ classList.add() ” metoda dodawania aktywnej klasy w JavaScript.
Przykład
Będziemy teraz używać tylko „ document.querySelector() ” z identyfikatorem” #tekst ”, aby wybrać element akapitu. Ponownie, metoda classList.add() zostanie użyta do dodania aktywnego „ nowa klasa ”:
aktywacja funkcji ( ) {tam jest = dokument. selektor zapytań ( '#tekst' ) ;
a. lista klas . Dodaj ( „nowa klasa” ) ;
}
Wyjście
Poznaliśmy dwie najprostsze metody dodawania aktywnej klasy w JavaScript
Wniosek
Aby dodać aktywną klasę, możemy wykorzystać „ pobierzElementById() ' lub ' zapytanieSelector() ” za pomocą metody classList.add(). Obie wymienione metody najpierw pobierają elementy według ich id, a następnie za pomocą metody classList.add(), nowej nazwy klasy przypisanej do elementu, która może być użyta do celów stylizacji. Ten post opisuje procedurę związaną z dodawaniem aktywnej klasy w JavaScript.