Mithilfe von JavaScript und jQuery gibt es verschiedene Möglichkeiten, den im src-Attribut des -Elements in einem HTML-Dokument angegebenen Bildpfad zu ändern.
So ändern Sie das src-Attribut des img-Elements mit JavaScript−
Verwenden Sie das src-Attribut in JavaScript.
So ändern Sie das src-Attribut des img-Elements mit jQuery−
Verwenden Sie die attr()-Methode
Verwenden Sie die prop()-Methode
Lassen Sie uns die oben aufgeführten Methoden zum Ändern des IMG-Elements src einzeln im Detail besprechen.
JavaScript ermöglicht es uns, das src-Attribut zu verwenden, um den ihm zugewiesenen Wert abzurufen und auch den Wert desselben Attributs zu aktualisieren oder zu ändern. Dies ist eine sehr häufige Methode, um den Wert des src-Attributs eines img-Elements zu ändern.
Die folgende Syntax erklärt Ihnen, wie Sie das src-Attribut in JavaScript verwenden, um den Wert des src-Attributs des img-Elements zu ändern -
Selected_image_element.src = " new value ";
Lassen Sie uns die praktische Umsetzung dieses Ansatzes anhand eines Codebeispiels verstehen.
Schritt 1 − Im ersten Schritt fügen wir ein img-Element mit einem damit verbundenen src-Attribut hinzu, dessen Wert wir später mithilfe der src-Eigenschaft in JavaScript ändern werden.
Schritt 2 – In diesem Schritt fügen wir ein Schaltflächenelement mit einem Onclick-Ereignis hinzu, das eine Funktion aufruft, um die Quelle des Bildes zu ändern, wenn der Benutzer auf die Schaltfläche klickt.
Schritt 3 – Im nächsten Schritt definieren wir eine JavaScript-Funktion, in der wir das img-Element anhand seiner ID abrufen und dann das src-Attribut mithilfe des src-Attributs ändern und zwischen den beiden Bildern wechseln.
Schritt 4 − Im letzten Schritt weisen wir die Funktion dem im letzten Schritt definierten Onclick-Ereignis zu, um die Änderungen auf dem Benutzerbildschirm anzuzeigen.
Das folgende Beispiel erklärt Ihnen, wie Sie das src-Attribut in JavaScript tatsächlich verwenden, um das src-Attribut eines Bildes zu ändern.
<html>
<body>
<h2>Change the src attribute of an img element</h2>
<p id = "upper">The image shown below will be changed once you click the button.</p>
<img src = "https://img.php.cn/" id = "image"> <br> <br>
<button id = "btn" onclick = "changeSrc()">Click to change the Image</button>
<p id = "result"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
function changeSrc() {
var img = document.getElementById('image');
if (img.src == "https://img.php.cn/") {
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU";
result.innerHTML += " The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>";
}
else {
img.src = "https://img.php.cn/";
result.innerHTML += " The src of above img is changed from <b> Link 2 </b> to " + " <b> Link 1 </b> <br>";
}
upper.innerHTML = " The image shown previously is replaced by some other image as <b> src attribute of img is changed. </b> <br> ";
}
</script>
</body>
</html>
In diesem Beispiel verwenden wir das src-Attribut in JavaScript, um das src-Attribut des img-Elements im HTML-Dokument zu ändern. Hier wechseln wir bei jedem Klick auf die Schaltfläche zwischen zwei Bildern.
Wir können auch die Methode attr() in JavaScript verwenden, um das src-Attribut zu ändern.
attr()-Methode – Die attr()-Methode akzeptiert zwei Parameter. Der erste Parameter ist der Name des zu ändernden Attributs, ausgedrückt in Form einer Zeichenfolge, und der andere Parameter ist der neue Wert, dem zugewiesen werden soll das Attribut.
Die folgende Syntax erklärt Ihnen, wie die attr()-Methode mit Parametern implementiert wird −
attr(" attribute_name ", " new_value ");
Lassen Sie uns die Implementierung dieses Ansatzes anhand eines Codebeispiels im Detail verstehen.
Schritt – Im
-Element des Dokuments, innerhalb des
Was bedeutet XML-Format?
Detaillierte Erläuterung der Verwendung der Sprintf-Funktion
So lassen Sie in einem HTML-Absatz zwei Leerzeichen leer
Welche Office-Software gibt es?
MySQL-Datenbank erstellen
Linux-Befehl „Datei suchen'.
Was macht Xiaohongshu?
localhost8080 kann nicht auf die Lösung zugreifen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
