So ändern Sie die Bildquelle JavaScript
JavaScript kann sich in HTML integrieren, um die Anforderungen von Benutzern zu erfüllen. Durch Integration können Benutzer eine Funktion verwenden, um die Bildquelle zu ändern. Zum Beispiel wird die SRC -Eigenschaft verwendet, um die Bildquelle anzugeben. Die Quellen können sowohl ein lokales Dateisystem als auch die Bild -URL enthalten. Dieser Leitfaden dient dazu, die Bildquelldatei mithilfe der SRC -Eigenschaft zu ändern. Alle neuesten Browser unterstützen die SRC -Eigenschaft zum Auffinden des Quellbildes.
Dieser Beitrag dient den folgenden Lernergebnissen:
- So ändern Sie die Bildquelle in JavaScript
- Beispiel 1: Ändern Sie die Bildquelle des lokalen Dateibildes in JavaScript
- Beispiel 2: Ändern Sie die Bildquelle des webbasierten Bildes in JavaScript
So ändern Sie die Bildquelle in JavaScript
JavaScript ist wichtig, um die Anzeige des Bildes dynamisch zu ändern. Zum Beispiel die img HTML -Element liefert das src Eigenschaft, um die Bildquelle zu ändern. Die Bildquelle kann ein lokales System oder ein URL -Bild sein.
Die Syntax zur Anwendung der SRC -Eigenschaft mit JavaScript wird unten angegeben:
Syntax
dokumentieren.GetElementById ("MyimageId").src = "Newsource.png ";Parameter
Die Beschreibung der Parameter lautet wie folgt:
- MyimageId: Gibt die Bild -ID an.
- src: Bezieht sich auf die Bildquelle.
Beispiel 1: Ändern Sie die Bildquelle des lokalen Bildes
Es wird ein Beispiel angepasst, um die Quelle eines Bildes über die lokale Datei in JavaScript zu ändern. Das Beispiel umfasst HTML- und JavaScript -Codedateien.
HTML Quelltext
Beispiel, um die Bildquelle in JavaScript zu ändern
In diesem Code die src Das Attribut wird verwendet, um das Bild abzurufen "Computer.JPG“. Danach ein "Bildschaltfläche ändernWird der HTML -Datei hinzugefügt, die die auslöst Änderungencr () Methode. Der Änderungencr () Die Methode ist in einer JavaScript -Datei geschrieben.
JavaScript -Code
function ayagescr ()dokumentieren.GetElementById ("imgid").Src = "Bücher.JPG ";
In diesem Code die Änderungensrc () Die Methode holt das Element mit seiner ID ab “imgid"Und legt den Wert der" fest "src”Attribut dieses Elements.
Ausgang
Die Ausgabe zeigt, dass nach dem Drücken der “Bildschaltfläche ändern”Die Quelldatei des Bildes wird geändert und das neue Bild wird angezeigt.
Beispiel 2: Ändern Sie die Bildquelle eines webbasierten Bildes
Ein weiteres Beispiel wird verwendet, um die Bildquelle durch die URL in JavaScript zu ändern. Der vollständige Code ist in HTML- und JavaScript -Dateien unterteilt.
HTML Quelltext
Beispiel, um die Webbildquelle in JavaScript zu ändern
Die Beschreibung des Codes lautet wie unten:
- Erstens die Breite und Höhe des Bildes werden dem Bild innerhalb zugeordnet Stichworte.
- Danach die URL eines Bildes wird von der bereitgestellt src Eigenschaft zum Anzeigen des Bildes im Browserfenster.
JavaScript -Code
function ayagescr ()dokumentieren.GetElementById ("imgid").src = "https: // cdn.Pixabay.com/foto/2022/07/28/33/42/Rainbow-7350780__340.JPG ";
In diesem Code die Änderungencr () Die Methode wird verwendet, um ein Ereignis auszulösen, wenn der Benutzer auf die Schaltfläche klickt, um die Quelle des Bildes zu ändern.
Ausgang
Die Ausgabe zeigt, dass ein Benutzer auf die “klickt“Bild ändernDas neue Bild wird durch das vorhandene ersetzt.
Abschluss
JavaScript liefert a src Attribut zum Ändern der Bildquelle, indem der Pfad der Datei angegeben wird. Zum Beispiel die GetElementId () Methode wird verwendet, um das HTML -Element durch zu extrahieren ID und dann der SRC Eigenschaft ändert das Quellbild. Nach der Extraktion wird die neue Quellbilddatei zugewiesen. Hier haben Sie gelernt, die Bildquelle in JavaScript zu ändern. Dafür haben wir eine Reihe von Beispielen in verschiedenen Szenarien gezeigt.