Programmatisk endre SRC til en IMG -tag

Når du designer et interaktivt brukergrensesnitt, kan det være et krav å legge til og fjerne visse bilder fra tid til annen for å engasjere brukeren. For eksempel å legge til flere bilder for å gi brukeren en bedre forståelse av konseptet eller skape effekter. I slike situasjoner, å endre SRC til en “img”Tag programmatisk hjelper med å få et nettsted til å skille seg ut.

Denne artikkelen vil beskrive tilnærmingene for å endre SRC til en IMG -tag programmatisk.

Hvordan du programmatisk endrer/erstatter SRC til en IMG -tag?

For å endre SRC for en IMG -tag programmatisk, bruk følgende tilnærminger:

• “src" Egenskap.
• jQuery's “attr ()”Metode.

Metode 1: Programmatisk endre SRC til en IMG -tag ved hjelp av SRC -attributt

“src”Attributt spesifiserer nettadressen til en ekstern fil. Denne tilnærmingen kan overføre det tildelte bildet med et nytt.

Eksempel
La oss oversikt over kodelinjene under satte kodelinjer:

Endring

I ovennevnte kodebit:

• For det første, spesifiser bildet i "”Tag via“src" Egenskap.
• Etter det, lag en knapp som har vedlagt “ved trykk”Hendelse som påkaller funksjonen MyFunction ().
• Nå, i JavaScript -koden, definerer du funksjonen som heter "MyFunction ()”. I sin definisjon, omdirigere det spesifiserte bildet ved sin ID ved hjelp av "getElementById ()”Metode.
• Til slutt, tilordne en ny bane til det tilgjengelige bildet ved hjelp av "src" Egenskap.
• Dette vil resultere for å endre det ekstra bildet på knapputløseren.

Produksjon

I output ovenfor kan det observeres at det spesifiserte bildet endres med et nytt bilde på knappeklikk.

Metode 2: Endre SRC for en IMG -tag via jquery via jQuery

jQuery's “attr ()”Metode brukes til å angi eller returnere attributter og verdier for de valgte elementene. Denne metoden kan brukes for å endre SRC til en IMG -tag ved å tildele en ny vei til det hentet bildet.

Syntaks

$ (velger).attr (attributt, verdi);

Her:

• “Egenskap”Angir attributtets navn.
• “verdi”Tilsvarer attributtet sin nye verdi.

Eksempel
La oss gå videre til kodelinjer:

Endring

I kodeblokken ovenfor:

• Inkluder på samme måte et bilde som bruker "src”Attributt har det oppgitt”id”.
• I neste linje, oppretter du en knapp for å legge ved en "ved trykk”Hendelse som vil påkalle funksjonen”MyFunction ()”.
• Nå, spesifiser jQuery -biblioteket ved å bruke “src" Egenskap.
• I JS -koden, erklær en funksjon som heter “MyFunction ()”.
• I sin definisjon får du tilgang til det spesifiserte bildet og tildele en ny bane via "attr ()”Metode.
• Som et resultat vil bildet bli overført på knappeklikk.

Produksjon

Det kan sees at bildet er endret på knapputløseren.

Konklusjon

For å endre/erstatte SRC for en IMG -tag programmatisk ved hjelp av JavaScript, bruk "src”Attributt eller jQuery's“attr ()”Metode. Disse tilnærmingene kan brukes til å bare hente det spesifiserte bildet og overføre det ved hjelp av en forhåndsdefinert attributt og en metode. Denne artikkelen illustrerte tilnærmingene for å endre/erstatte SRC for en IMG -tag programmatisk.