Hvordan endre knappfarge på klikk i JavaScript

I JavaScript ønsker vi ofte å lage tilpassede websider som involverer forskjellige funksjonaliteter for en attraktiv design. For eksempel i tilfelle av å varsle brukeren om vellykket drift, advarsel eller feilvarsler. I slike scenarier er det å endre knappfargen på klikk i JavaScript en viktig funksjon for å få brukerens oppmerksomhet og varsle dem om de spesifikke varslene på forhånd.

Denne artikkelen vil diskutere metodene for å endre fargen på en knapp på klikk i JavaScript.

Hvordan endre fargen på knappen på klikk i JavaScript?

For å endre fargen på knappfargen på klikket i JavaScript, "stil.bakgrunnsfarge”Eiendom kan brukes med:

• “ved trykk" begivenhet
• “indeksering”
• “QuerySelector () metode

Vi vil nå gå gjennom hver av de listede metodologiene en etter en!

Metode 1: Endre knappfarge ved klikk i JavaScript ved å bruke "OnClick" -hendelsen

Stilen.BakgrunnColor -egenskapen justerer bakgrunnsfargen på det spesifiserte elementet ved hjelp av fargekoding. Den brukes til å sette fargen med hensyn til de røde, grønne og blå (RGB) verdiene. Mer spesifikt kan du bruke "ved trykk”På en slik måte at når en knapp er klikket, blir den ekstra fargekoden brukt som bakgrunn.

Følgende eksempel forklarer det uttalte konseptet tydelig.

Eksempel

For det første, oppretter en knapp med "knapp”Id. Legg så til "ved trykk”Hendelse som vil utløse“ButtonColor ()”Funksjon når den ekstra knappen er klikket:

Deretter erklærer en funksjon som heter “ButtonColor ()”. I sin definisjon får du tilgang til knappen ved hjelp av dokumentet.GeelementById () -knappen og bruk stilen.Bakgrunnsfargeegenskaper for å stille inn knappens farge. Du kan tilordne hvilken som helst RGB -fargekode som bakgrunn:

Ovennevnte implementering vil vise følgende utdata:

Ønsker å angi mer enn en bakgrunnsfarge på en knapp? Hvis ja, følg neste avsnitt!

Metode 2: Endre knappfarge på et klikk i JavaScript ved hjelp av indeksering

“Indeksering”Er en teknikk brukt for å iterere langs en matrise eller liste elementer ved å spesifisere indeksene deres. Det kan brukes for å definere et sett med farger og endre knappfargen med hensyn til de ekstra elementene. Mer spesifikt kan du legge ved en AddEventListener () -metode på en slik måte når en knapp klikkes; Bakgrunnsfargen vil bli endret i henhold til den ekstra fargen.

Se på følgende eksempel for demonstrasjon.

Eksempel

For det første oppretter vi en knapp med "Klikk her”Verdi:

Deretter vil knappen få tilgang til ved å spesifisere IDen i dokumentet.getElementById () Metode:

Nå vil variablene indeks0 og indeks1 bli erklært med verdiene “0”Og“1”Henholdsvis:

Etter det vil en rekke to farger bli definert og lagret i en variabel som heter “farger”:

Til slutt en "Klikk”Arrangementet vil bli koblet til den opprettede knappen ved å påkalle“AddEventListener ()”Metode. Dette vil fungere på en slik måte at når knappen er klikket, blir ButtonColor () -metoden påberopt, noe som vil endre bakgrunnsfargen i henhold til indeksen til de ekstra fargene i matrisen:

Som du kan se i den gitte utgangen, når knappen er klikket, er bakgrunnsfargen først satt til "grønn" deretter "blå”:

Metode 3: Endre knappfarge ved å klikke i JavaScript ved å bruke “Dokument.QuerySelector () ”-metode

“dokument.QuerySelector ()”Metode henter det første elementet som samsvarer med en CSS -velger og“AddEventListener ()”Metoden inkluderer og bruker en spesifikk hendelse på et element. Disse metodene kan brukes for å få tilgang til knapp -ID, legge til klikkhendelsesbehandleren og angi knappens bakgrunnsfarge.

Se på følgende eksempel for demonstrasjon.

Eksempel

I det følgende eksempel, ta med en knapp med den spesifiserte verdien som diskutert i de tidligere metodene:

Nå, bruk dokumentet.QuerySelector () -metode for å få tilgang til knappen med “suksess”Id:

Til slutt, bruk AddEventListener () for å legge til en hendelsesbehandler som heter “Klikk”Til knappen og setter fargen til“Lysegrønn”Bruke stilen.Bakgrunnsfarge eiendom:

Produksjon

Vi har gitt de enkleste metodene for å endre knappfarge på klikk i JavaScript.

Konklusjon

For å endre knappfargen i JavaScript, kan du bruke stilen.Bakgrunnsfargeegenskaper med fargekoden, som er RGB -verdien. For å gjøre det, påkalle dokumentet.getElementById () -metode for tilgang til den opprettede knappen og utfør deretter videre operasjoner. Dokumentet.QuerySelector () brukes også til samme formål. Videre kan indekseringsteknikken også brukes til å bruke flere bakgrunnsfarger. Denne håndboken guidet om å endre knappens farge på klikk i JavaScript.