Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah anda mengemas kini URL sumber teg imej secara dinamik menggunakan JavaScript?

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

Patricia Arquette
Patricia Arquetteasal
2024-10-31 05:25:30291semak imbas

How do you dynamically update the source URL of an image tag using 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>
  2. Akses Elemen Imej:
    Gunakan kaedah document.getElementById() untuk dapatkan rujukan kepada img elemen.

    <code class="javascript">var editSave = document.getElementById("edit-save");</code>
  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>

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn