Bagaimanakah anda mengemas kini URL sumber teg imej secara dinamik menggunakan JavaScript?

Tukar URL Sumber Imej Menggunakan JavaScript

Untuk mengemas kini URL sumber teg imej secara dinamik menggunakan JavaScript, adalah penting untuk memastikan pengendalian pendengar dan elemen acara yang betul pengenalan.

Penyelesaian:

1. Tambah ID pada Teg img:
   Tetapkan ID unik kepada teg img. Ini akan membantu anda menyasarkannya secara khusus dalam kod JavaScript.

   <code class="html"><img src="../template/edit.png" id="edit-save" alt="Edit" /></code>

   Salin selepas log masuk

2. Akses Elemen Imej:
   Gunakan kaedah document.getElementById() untuk dapatkan rujukan kepada img elemen.

   <code class="javascript">var editSave = document.getElementById("edit-save");</code>

   Salin selepas log masuk

3. Tukar Atribut src:
   Setelah anda mempunyai rujukan elemen imej, anda boleh mengubah suai atribut srcnya untuk mengemas kini imej sumber.

   <code class="javascript">editSave.src = "../template/save.png";</code>

   Salin selepas log masuk

Contoh:

Dalam kod yang anda berikan, tambahkan ID seperti berikut:

<code class="html"><a href="#" onclick="edit()"><img src="../template/edit.png" id="edit-save" alt="Edit" /></a></code>

Kemudian, ubah suai fungsi JavaScript anda:

<code class="javascript">function edit() {
    var editSave = document.getElementById("edit-save");
    editSave.src = "../template/save.png";
}</code>

Dengan pendekatan ini, sumber imej akan dikemas kini dengan betul dengan satu klik pada imej.

Atas ialah kandungan terperinci Bagaimanakah anda mengemas kini URL sumber teg imej secara dinamik menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!