Bagaimana Mengawal Atribut Sumber Imej secara Pengaturcaraan dalam JavaScript?

Kawalan Programatik Ke Atas Atribut Sumber Imej

Dalam bidang pembangunan web, selalunya perlu mengubah suai kandungan halaman kami secara dinamik. Satu tugas biasa ialah menukar atribut sumber tag imej. Memahami cara untuk mencapai ini menggunakan JavaScript adalah penting untuk mencipta aplikasi web yang responsif dan interaktif.

Menggunakan teg img HTML5, kami boleh memaparkan imej pada halaman web. Dengan mengakses atribut src tag ini, kita boleh mengawal imej yang dipaparkan. Mari kita terokai cara melakukannya.

Menukar Sumber Imej Secara Dinamik

Untuk mengubah atribut src secara pemrograman, kita mesti mengenal pasti teg img terlebih dahulu menggunakan id atau pengecam unik yang lain. Sebaik sahaja kami mempunyai rujukan kepada teg, kami boleh menggunakan JavaScript untuk mengubah suai sifat srcnya.

Sebagai contoh, untuk menukar atribut src teg img dengan id "myImage" untuk memaparkan imej baharu, kami akan menggunakan kod berikut:

<code class="javascript">document.getElementById("myImage").src = "new-image.jpg";</code>

Mengendalikan Peristiwa dan Kemas Kini Sumber Imej

Dalam senario yang diberikan, apabila atribut src tag img perlu ditukar semasa peristiwa, kami boleh memanfaatkan pendengar acara untuk mencetuskan kemas kini sumber. Katakan kami ingin menukar imej apabila pengguna mengklik padanya.

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

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

Dengan menambahkan atribut onclick pada teg img dan mengaitkannya dengan fungsi JavaScript, kami memastikan sumber imej dikemas kini apabila imej diklik.

Atas ialah kandungan terperinci Bagaimana Mengawal Atribut Sumber Imej secara Pengaturcaraan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!