Cambia programmaticamente l'SRC di un tag IMG

Durante la progettazione di un'interfaccia utente interattiva, può esserci un requisito per aggiungere e rimuovere determinate immagini di volta in volta per coinvolgere l'utente. Ad esempio, aggiungendo più immagini per dare all'utente una migliore comprensione del concetto o creazione di effetti. In tali situazioni, cambiando l'SRC di un "img"TAG aiuta a distinguere un sito.

Questo articolo descriverà gli approcci per cambiare programmaticamente SRC di un tag IMG.

Come cambiare programmaticamente/sostituire l'SRC di un tag IMG?

Per modificare l'SRC di un tag IMG a livello di programmazione, applica i seguenti approcci:

• "src"Attributo.
• JQuery's "attr ()" metodo.

Metodo 1: modificare a livello di programmazione SRC di un tag IMG utilizzando l'attributo SRC

IL "src"L'attributo specifica l'URL di un file esterno. Questo approccio può passare all'immagine assegnata con una nuova.

Esempio
Panoramiamo le righe di codice di seguito:

Modifica

Nel frammento di codice sopra:

• In primo luogo, specificare l'immagine in "Tag tramite il "src"Attributo.
• Dopodiché, crea un pulsante con un allegato "al clic"Evento che invoca la funzione myFunction ().
• Ora, nel codice JavaScript, definisce la funzione denominata "myFunction ()". Nella sua definizione, reindirizza l'immagine specificata dal suo ID con l'aiuto di "getElementById ()" metodo.
• Infine, assegna un nuovo percorso all'immagine accessibile con l'aiuto di "src"Attributo.
• Ciò cambierà di conseguenza l'immagine aggiunta sul trigger del pulsante.

Produzione

Nell'output sopra, si può osservare che l'immagine specificata viene modificata con una nuova immagine sul clic del pulsante.

Metodo 2: modificare a livello di programmazione SRC di un tag IMG tramite jQuery

JQuery's "attr ()"Il metodo viene utilizzato per impostare o restituire attributi e valori degli elementi selezionati. Questo metodo può essere applicato per modificare l'SRC di un tag IMG allocando un nuovo percorso all'immagine recuperata.

Sintassi

$ (selettore).attr (attributo, valore);

Qui:

• "attributo"Indica il nome dell'attributo.
• "valore"Corrisponde al nuovo valore dell'attributo.

Esempio
Passiamo alle righe del codice:

Modifica

Nel blocco del codice sopra:

• Allo stesso modo, includi un'immagine usando il “src"Attributo che ha dichiarato"id".
• Nella riga successiva, crea un pulsante per allegare un "al clic"Evento che invocherà la funzione"myFunction ()".
• Ora, specifica la libreria jQuery utilizzando il “src"Attributo.
• Nel codice JS, dichiarare una funzione denominata "myFunction ()".
• Nella sua definizione, accedi all'immagine specificata e alloca un nuovo percorso tramite "attr ()" metodo.
• Di conseguenza, l'immagine verrà trasferita sul clic del pulsante.

Produzione

Si può vedere che l'immagine è stata modificata sul trigger del pulsante.

Conclusione

Per modificare/sostituire l'SRC di un tag IMG programmaticamente usando JavaScript, applica “src"Attributo o jQuery"attr ()" metodo. Questi approcci possono essere utilizzati per recuperare semplicemente l'immagine specificata e passare con l'aiuto di un attributo predefinito e un metodo, rispettivamente. Questo articolo ha illustrato gli approcci per modificare/sostituire a livello di programmazione SRC di un tag IMG.