suchen

Heim >Web-Frontend >js-Tutorial >Wie ändere ich das src-Attribut eines img-Elements in JavaScript/jQuery?

Wie ändere ich das src-Attribut eines img-Elements in JavaScript/jQuery?

WBOY
WBOYnach vorne
2023-08-23 16:49:142675Durchsuche

Mithilfe von JavaScript und jQuery gibt es verschiedene Möglichkeiten, den im src-Attribut des Wie ändere ich das src-Attribut eines img-Elements in JavaScript/jQuery?-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.

Verwendung des src-Attributs in JavaScript

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.

Syntax

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.

Algorithmus

  • 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.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

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.

Verwendung der attr()-Methode in jQuery

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.

Syntax

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.

Algorithmus

  • Schritt – Im

    -Element des Dokuments, innerhalb des <script>-Elements, fügen wir den jQuery-Link <src> hinzu </script>

  • Schritt 2 – In diesem Schritt verwenden wir ein img-Element mit einem src-Attribut und verwenden später die attr()-Methode von jQuery, um es zu ändern

  • Schritt 3 - Im dritten Schritt fügen wir ein Schaltflächenelement hinzu, das später mithilfe von jQuery ein Onclick-Ereignis und eine Funktion erhält

  • Schritt 4 − Im nächsten Schritt verwenden wir die „$“-Syntax von jQuery, um jedes Element abzurufen und Aufgaben für jedes Element auszuführen.

  • Schritt 5 - Im letzten Schritt weisen wir der Schaltfläche mithilfe der on()-Methode von jQuery ein Onclick-Ereignis zu, sodass der Benutzer beim Klicken auf die Schaltfläche die darin angegebene Funktion aufruft und ändert Für den Benutzer sichtbar.

    • Die chinesische Übersetzung von
Beispiel

lautet:

Beispiel

Das folgende Beispiel veranschaulicht die Verwendung der attr()-Methode in jQuery, um das src-Attribut des img-Elements zu ändern: 

<html>
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
   <h2>Change the src attribute of an img element using jQuery</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">Click to change the Image</button>
   <p id = "result"> </p>
   <script>
      $("#btn").on('click', function (e) {
         $('#image').attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU");
         $("#result").html(" The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>");
         $("#upper").html(" The image shown previously is replaced by some other image as <b> the src attribute of img is changed. </b> <br> ");
      });
   </script>
</body>
</html>

Verwenden Sie die prop()-Methode in jQuery

Ähnlich wie die Methode attr() bietet jQuery auch die Methode prop(), um den Wert eines beliebigen Attributs in einen neuen Wert zu ändern.

prop()-Methode - Die prop()-Methode kann wie die attr()-Methode im vorherigen Beispiel verwendet werden. Sie verwendet den Eigenschaftsnamen und den neuen Wert, der als Parameter zugewiesen werden soll.

Mit der prop()-Methode können wir den Wert auf eine einzelne Eigenschaft und mehrere Eigenschaften festlegen.

Syntax

Die folgende Syntax zeigt Ihnen, wie Sie die prop()-Methode für verschiedene Zwecke verwenden können −

Ändern Sie den Wert eines bestimmten Attributs − 

prop(" attribute_name ", " new_value ");

Ändern Sie den Wert mehrerer Eigenschaften − 

prop({ attribute_name: new_value, attribute_name: new_value });

In der zweiten Syntax versorgen wir mehrere Eigenschaften gleichzeitig mit ihren neuen Werten.

Lassen Sie uns die Verwendung der prop()-Methode anhand von Codebeispielen im Detail verstehen.

Algorithmus

Der Algorithmus dieses Beispiels ähnelt fast dem Algorithmus des vorherigen Beispiels. Sie müssen lediglich die attr()-Methode im vorherigen Algorithmus durch die prop()-Methode ersetzen und die Aufgabe ist erledigt.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Das folgende Beispiel erklärt Ihnen, wie die prop()-Methode den Wert des src-Attributs des img-Elements in einem HTML-Dokument ändert -

<html>
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
   <h2>Changing the src attribute of an img element using jQuery</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">Click to change the Image</button>
   <p id = "result"> </p>
   <script>
      $("#btn").on('click', function (e) {
         $('#image').prop("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoLnvRnTNP2rojd7e9b_Ilw5zZkSlPotSPIA&usqp=CAU");
         $("#result").html(" The src of above img is changed from <b> Link 1 </b> to " + " <b> Link 2 </b> <br>");
         $("#upper").html(" The image shown previously is replaced by some other image as <b> src attribute of img is changed. </b> <br> ");
      });
   </script>
</body>
</html>

Im obigen Beispiel haben wir die prop()-Methode in jQuery verwendet, um das src-Attribut des img-Elements im HTML-Dokument zu ändern.

In diesem Artikel haben wir die drei verschiedenen Methoden zum Ändern des Werts des src-Attributs eines img-Elements mithilfe von JavaScript und jQuery besprochen. Wir haben alle Methoden im Detail verstanden, indem wir sie in den Codebeispielen praktisch implementiert haben, was dabei hilft, das praktische Wissen über die Konzepte aufzubauen.

Das obige ist der detaillierte Inhalt vonWie ändere ich das src-Attribut eines img-Elements in JavaScript/jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie erstelle ich mit FabricJS ein Rechteck, das darauf wartet, dass der Cursor über einem Objekt schwebt?Nächster Artikel：Wie erstelle ich mit FabricJS ein Rechteck, das darauf wartet, dass der Cursor über einem Objekt schwebt?

In Verbindung stehende Artikel

Mehr sehen