Legg til klasse i klikket element ved hjelp av JavaScript

Mens du oppretter en responsiv webside eller nettsted, kan det være et krav å legge til forskjellige funksjonaliteter eller effekter på brukerhandling eller automatisk. For eksempel å fremheve en bestemt seksjon eller element ved klikk/sveve. I slike situasjoner er det å legge til klasse til et klikket element ved hjelp av JavaScript.

Denne oppskrivningen vil diskutere tilnærmingene for å legge til en klasse i et klikket element ved hjelp av JavaScript.

Hvordan legge til klasse i klikket element ved hjelp av JavaScript?

“AddEventListener ()”Metode, i kombinasjon med“Klasseliste”Eiendom og“Legg til()”Metode, kan brukes for å legge til en klasse i det klikkede elementet ved hjelp av JavaScript.

AddEventListener () -metoden knytter en hendelse med et element. Klasselisteegenskapen gir CSS -klassenavn på et element. Mens add () er en klasselistemetode som brukes til å legge til symboler på listen.

Disse tilnærmingene kan brukes for å knytte en hendelse og legge til en klasse til elementet (e) basert på den hendelsen.

Syntaks

element.AddEventListener (hendelse, lytt, bruk);

I den gitte syntaks:

• “begivenhet”Henviser til den spesifiserte hendelsen.
• “lytte”Er funksjonen som må påberopes.
• “bruk”Er den valgfrie verdien.

La oss utdype konseptet ved hjelp av følgende eksempler!

Eksempel 1: Legg til en enkelt klasse i klikket element i JavaScript

I dette eksemplet vil en enkelt klasse bli lagt til det klikkede elementet (e):

Klikk på meg

I ovennevnte kodebit:

• For det første, inkluder "”Og“”Elementer, med henholdsvis de uttalte klassene.
• Ta også med en knapp i neste trinn.
• I JS -kodeblokken, bruk "AddEventListener ()”Metode for å knytte en hendelse”Klikk”Til funksjonen som heter”ClassClicked ()”.
• Pass også objektet "begivenhet”Som funksjons parameter.
• I funksjonsdefinisjonen, tilknytte “begivenhet”Objekt med“mål”Eiendom. Disse tilnærmingene får tilgang til DOM -elementene på hendelsesutløseren.
• Resultatet, den tilknyttede “Klasseliste”Eiendom og“Legg til()”Metoden vil legge den spesifiserte klassen til elementet (e) ved klikk.
• I CSS -koden, stil klassen som skal legges ved, i.e., Lagt til Class.

Produksjon

Som observert i output ovenfor, etter å klikke på elementene, blir den aktuelle klassen lagt til elementene.

Eksempel 2: Legg til flere klasser til klikket element i JavaScript

I dette spesielle eksemplet vil flere klasser bli lagt til det klikkede elementet (e):

Linuxhint nettsted

JavaScript

Blogger

Bruk følgende trinn, som gitt i koden ovenfor:

• Inkluderer det angitte “

  ”Elementer som har de spesifiserte klassene.

• I JavaScript -kodeblokken, ved å legge ved en hendelse "Klikk”Til funksjonen ClassClicked () ved å bruke“AddEventListener ()”Metode.
• Husk de diskuterte tilnærmingene for å få tilgang til elementer på DOM.
• Nå, bruk “Klasseliste”Eiendom og“Legg til()”Metode som har flere klasser som parametere.
• Dette vil føre til at de oppgitte flere klasser til det klikkede elementet (e).
• I CSS -koden, spesifiser klassene som må legges til elementet (e) og utfør den angitte stylingen.

Produksjon

I denne spesielle utgangen blir flere klasser lagt til hver av "> ”Elementer på hendelsesutløseren.

Konklusjon

“AddEventListener ()”Metode, i kombinasjon med“Klasseliste”Eiendom og“Legg til()”Metode, kan brukes for å legge til en klasse i det klikkede elementet ved hjelp av JavaScript. Disse tilnærmingene kan implementeres for å legge til enkelt- eller flere klasser til element (er) basert på den vedlagte hendelsen. Denne oppskrivningen viste å legge til en klasse til det klikkede elementet ved hjelp av JavaScript.