Programowo zmień SRC znacznika IMG

Podczas projektowania interaktywnego interfejsu użytkownika może istnieć wymóg dołączania i usuwania niektórych obrazów od czasu do czasu, aby zaangażować użytkownika. Na przykład dołączenie wielu obrazów, aby zapewnić użytkownikowi lepsze zrozumienie koncepcji lub tworzenie efektów. W takich sytuacjach zmiana SRC „img”Tag programowo pomaga w wyróżnianiu witryny.

W tym artykule opisano podejścia do zmiany SRC znacznika IMG programowo.

Jak programowo zmienić/wymienić SRC znacznika IMG?

Aby zmienić SRC znacznika IMG programowo, zastosuj następujące podejścia:

• "src" atrybut.
• JQuery's „attr ()" metoda.

Metoda 1: Programowo zmieniają SRC znacznika IMG za pomocą atrybutu SRC

„„src”Atrybut określa adres URL pliku zewnętrznego. Takie podejście może przenieść przydzielony obraz za pomocą nowego.

Przykład
Przeglądmy poniższe linie kodu:

Zmiana

W powyższym fragmencie kodu:

• Najpierw określ obraz w „”Tag za pomocą„src" atrybut.
• Następnie utwórz przycisk z załączonym „na kliknięcie„Wydarzenie wywołujące funkcję myFunction ().
• Teraz, w kodzie JavaScript, zdefiniuj funkcję o nazwie „myFunction ()". W swojej definicji przekieruj określony obraz za pomocą jego identyfikatora za pomocą „getElementById ()" metoda.
• Na koniec przypisz nową ścieżkę do dostępnego obrazu za pomocą „src" atrybut.
• To spowoduje zmianę dodanego obrazu na spustu przycisku.

Wyjście

W powyższym wyjściu można zauważyć, że określony obraz jest zmieniany za pomocą nowego obrazu przy przycisku.

Metoda 2: Programowo zmieniają SRC znacznika IMG za pośrednictwem JQuery

JQuery's „attr ()”Metoda jest używana do ustawiania lub zwracania atrybutów i wartości wybranych elementów. Tę metodę można zastosować do zmiany SRC znacznika IMG poprzez przydzielenie nowej ścieżki do pobieranego obrazu.

Składnia

$ (selektor).attr (atrybut, wartość);

Tutaj:

• "atrybut”Wskazuje nazwę atrybutu.
• "wartość”Odpowiada nowej wartości atrybutu.

Przykład
Przejdźmy do linii kodu:

Zmiana

W powyższym bloku kodu:

• Podobnie dołącz obraz za pomocą „src”Atrybut o podaniu„ID".
• W następnym wierszu utwórz przycisk, aby dołączyć „na kliknięcie„Wydarzenie, które wywoła funkcję„myFunction ()".
• Teraz określ bibliotekę jQuery za pomocą „src" atrybut.
• W kodzie JS zadeklaruj funkcję o nazwie „myFunction ()".
• W swojej definicji uzyskaj dostęp do określonego obrazu i przydzielić nową ścieżkę „attr ()" metoda.
• W rezultacie obraz zostanie przeniesiony po kliknięciu przycisku.

Wyjście

Można zauważyć, że obraz został zmieniony na spustu przycisku.

Wniosek

Aby zmienić/wymienić SRC znacznika IMG programowo za pomocą JavaScript, zastosuj „src”Atrybut lub jQuery's„attr ()" metoda. Podejścia te można wykorzystać do po prostu pobrania określonego obrazu i przejścia go za pomocą odpowiednio zdefiniowanego atrybutu i metody. W tym artykule zilustrowano podejścia do zmiany/wymiany SRC znacznika IMG programowo.