Kako dodati aktivnu klasu u JavaScript

Dok razvijate web stranicu, ponekad vaš kôd postane toliko dugačak i složen da ne možete pojedinačno dodati ili ukloniti CSS ID-ove ili klase. Da biste riješili takve situacije, možete koristiti JavaScript za dodavanje aktivnih klasa za stiliziranje ili za ispunjavanje drugih svrha. JavaScript pruža različite metode za trenutačno rješavanje navedenog složenog problema.

Ovaj priručnik će objasniti postupak dodavanja aktivne klase u JavaScript.

Kako dodati aktivnu klasu u JavaScript?

Za dodavanje aktivne klase koristit ćemo sljedeće metode:

document.getElementById()
document.querySelector()

Prijeđimo na prvu metodu!

Metoda 1: Koristite document.getElementById() s metodom classList.add() za dodavanje aktivne klase u JavaScript

U JavaScriptu, ' document.getElementById() ” metoda se koristi za pristup određenom elementu pomoću njegovog ID-a. Međutim, odabire samo elemente na temelju njihovih ID-ova, a ne klasa. Možete ga koristiti s ' classList.add() ” metoda za dodavanje aktivne klase u JavaScript.

Istražimo ovu metodu na primjeru.

Primjer

U našoj HTML datoteci uzet ćemo '

” s nekim tekstom, navedite njegov ID kao “ txt ', i dodajte ' na klik ' događaj koji će pokrenuti ' aktivirati() ” funkcija. Imajte na umu da dodajte oznaku

unutar oznake :

< p id = 'txt' na klik = 'aktivirati()' > Dodirnite ovdje str >

U JavaScript datoteci definirajte funkciju activate() na takav način da prvo pristupa elementu odlomka koristeći njegov ID u metodi document.getElementbyId(). Zatim dodajte CSS klasu na njen popis klasa za potrebe stiliziranja:

aktivirati funkciju ( ) {

tamo je = dokument. getElementById ( 'txt' ) ;

a. classList . dodati ( 'nova klasa' ) ;

}

U CSS datoteci stavite točku ispred ' nova klasa ' i dodijelite ' boja pozadine ' svojstvo vrijednost ' naranča ”:

. nova klasa {

pozadina - boja : naranča ;

}

Kao rezultat toga, kada kliknete na element odlomka, na njega će se primijeniti dodano svojstvo pozadine:

Pogledajmo sljedeću metodu u kojoj ćemo koristiti document.querySelector() za dodavanje aktivne klase.

Metoda 2: Koristite document.querySelector() s metodom classList.add() za dodavanje aktivne klase u JavaScript

U JavaScriptu, ' document.querySelector() ” metoda se koristi za dobivanje prvog elementa iz koda. Možete navesti klase i ID-ove unutar metode querySelector(). Može se koristiti s ' classList.add() ” metoda za dodavanje aktivne klase u JavaScript.

Primjer

Sada ćemo koristiti samo ' document.querySelector() 's id-om' #txt ” za odabir elementa odlomka. Opet, metoda classList.add() koristit će se za dodavanje aktivnog ' nova klasa ”:

aktivirati funkciju ( ) {

tamo je = dokument. querySelector ( '#txt' ) ;

a. classList . dodati ( 'nova klasa' ) ;

}

Izlaz

Naučili smo dvije najjednostavnije metode za dodavanje aktivne klase u JavaScript

Zaključak

Za dodavanje aktivne klase, možemo upotrijebiti ' getElementById() ' ili ' querySelector() ” s metodom classList.add(). Obje spomenute metode prvo dobivaju elemente po njihovom ID-u, a zatim koristeći metodu classList.add(), novo ime klase dodijeljeno elementu koje se može koristiti za stiliziranje. Ovaj post opisuje postupak koji se odnosi na dodavanje aktivne klase u JavaScript.

Kako dodati aktivnu klasu u JavaScript