Bagaimana untuk menukar atribut src elemen img dalam JavaScript/jQuery?-tutorial js-php.cn

Menggunakan JavaScript dan jQuery, terdapat cara berbeza untuk menukar laluan imej yang diberikan dalam atribut src elemen Bagaimana untuk menukar atribut src elemen img dalam JavaScript/jQuery? dalam dokumen HTML.

Bagaimana untuk menukar atribut src elemen img menggunakan JavaScript−

Gunakan atribut src dalam JavaScript.

Bagaimana untuk menukar atribut src elemen img menggunakan jQuery−

Gunakan kaedah attr()
Gunakan kaedah prop()

Mari kita bincangkan kaedah yang disenaraikan di atas untuk menukar elemen img src secara terperinci satu persatu.

Menggunakan atribut src dalam JavaScript

JavaScript membolehkan kami menggunakan atribut src untuk mendapatkan nilai yang telah ditetapkan kepadanya dan juga mengemas kini atau menukar nilai atribut yang sama. Ini adalah cara yang sangat biasa untuk menukar nilai atribut src unsur img.

Sintaks

Sintaks berikut akan menerangkan kepada anda cara menggunakan atribut src dalam JavaScript untuk menukar nilai atribut src elemen img -

Selected_image_element.src = " new value ";

Salin selepas log masuk

Mari kita memahami pelaksanaan praktikal pendekatan ini melalui contoh kod.

Algoritma

Langkah 1 − Dalam langkah pertama, kami akan menambah elemen img dengan atribut src yang dikaitkan dengannya, yang nilainya akan kami ubah kemudian menggunakan sifat src dalam JavaScript.
Langkah 2 - Dalam langkah ini, kami akan menambah elemen butang dengan acara onclick dan memanggil fungsi untuk menukar src imej apabila pengguna mengklik butang.
Langkah 3 - Dalam langkah seterusnya, kami akan mentakrifkan fungsi JavaScript di mana kami akan mendapatkan elemen img menggunakan IDnya dan kemudian menukar atribut src menggunakan atribut src dan bertukar antara dua imej.
Langkah 4 − Dalam langkah terakhir, kami akan menetapkan fungsi kepada acara onclick yang ditakrifkan dalam langkah terakhir untuk melihat perubahan pada skrin pengguna.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Contoh berikut akan menerangkan kepada anda cara sebenarnya menggunakan atribut src dalam JavaScript untuk menukar atribut src img.

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

Salin selepas log masuk

Dalam contoh ini, kami menggunakan atribut src dalam JavaScript untuk menukar atribut src elemen img dalam dokumen HTML. Di sini, kami bertukar antara dua imej setiap kali butang diklik.

Menggunakan kaedah attr() dalam jQuery

Kami juga boleh menggunakan kaedah attr() dalam JavaScript untuk menukar atribut src.

attr() method - Kaedah attr() menerima dua parameter, parameter pertama ialah nama atribut yang akan ditukar, dinyatakan sebagai rentetan dan parameter lain ialah nilai baharu yang akan diberikan kepada atribut.

Sintaks

Sintaks berikut akan menerangkan kepada anda cara kaedah attr() dengan parameter dilaksanakan −

attr(" attribute_name ", " new_value ");

Salin selepas log masuk

Mari kita memahami pelaksanaan pendekatan ini secara terperinci dengan contoh kod.

Algoritma

Langkah - Dalam elemen dokumen, dalam elemen
Artikel terbaru oleh pengarang
- Apakah itu NullPointerException, dan bagaimana saya membetulkannya?
  
  2024-10-22 09:46:29
- Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C
  
  2024-10-13 13:53:41
- Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula
  
  2024-10-12 12:15:51
- Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu
  
  2024-10-11 22:47:31
- Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak
  
  2024-10-11 19:36:51
- Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak
  
  2024-10-11 15:50:41
- Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula
  
  2024-10-11 15:07:41
- PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web
  
  2024-10-11 14:21:21
- Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda
  
  2024-10-11 12:59:11
- Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula
  
  2024-10-11 12:17:31
Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

3

2062

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

11

2222

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

1872

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1753

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1781
Topik-topik yang berkaitan
Lagi>