cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menukar atribut src elemen img dalam JavaScript/jQuery?

Bagaimana untuk menukar atribut src elemen img dalam JavaScript/jQuery?

WBOY
WBOYke hadapan
2023-08-23 16:49:142672semak imbas

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

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>

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 ");

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

Algoritma

  • Langkah - Dalam elemen

    dokumen, dalam elemen <script>, kami akan menambah pautan jQuery <src> </script>

  • Langkah 2 - Dalam langkah ini, kami akan menggunakan elemen img dengan atribut src, dan kemudian menggunakan kaedah attr() jQuery untuk mengubah suainya

  • Langkah 3 - Dalam langkah ketiga kami akan menambah elemen butang yang kemudiannya akan diberikan acara onclick dan fungsi menggunakan jQuery

  • Langkah 4 − Dalam langkah seterusnya, kami akan menggunakan sintaks “$” jQuery untuk mendapatkan setiap elemen dan melaksanakan tugasan pada setiap elemen.

  • Langkah 5 − Pada langkah terakhir, kami akan menetapkan acara onclick pada butang menggunakan kaedah on() jQuery supaya apabila pengguna mengklik pada butang, ia akan memanggil fungsi yang diberikan di dalamnya dan menukar Kelihatan kepada pengguna.

    • Terjemahan bahasa Cina bagi
Contoh

ialah:

Contoh

Contoh berikut akan menggambarkan menggunakan kaedah attr() dalam jQuery untuk menukar atribut src elemen img: 

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

Gunakan kaedah prop() dalam jQuery

Sama seperti kaedah attr(), jQuery juga menyediakan kaedah prop() untuk menukar nilai sebarang atribut kepada nilai baharu.

kaedah prop() − Kaedah prop() boleh digunakan kerana kami menggunakan kaedah attr() dalam contoh sebelumnya Ia memerlukan nama sifat dan nilai baharu untuk ditetapkan sebagai parameter.

Kita boleh menetapkan nilai kepada satu sifat dan berbilang sifat menggunakan kaedah prop().

Sintaks

Mengikuti sintaks akan menunjukkan kepada anda cara anda boleh menggunakan kaedah prop() untuk tujuan yang berbeza −

Tukar nilai atribut tertentu − 

prop(" attribute_name ", " new_value ");

Tukar nilai berbilang hartanah − 

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

Dalam sintaks kedua, kami menyediakan berbilang sifat dengan nilai baharunya pada masa yang sama.

Mari kami memahami penggunaan kaedah prop() secara terperinci melalui contoh kod.

Algoritma

Algoritma contoh ini hampir serupa dengan algoritma contoh sebelumnya. Anda hanya perlu menggantikan kaedah attr() dalam algoritma sebelumnya dengan kaedah prop() dan kerja akan selesai.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Contoh berikut akan menerangkan kepada anda bagaimana kaedah prop() mengubah nilai atribut src elemen img dalam dokumen HTML -

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

Dalam contoh di atas, kami menggunakan kaedah prop() dalam jQuery untuk menukar atribut src elemen img dalam dokumen HTML.

Dalam artikel ini, kami telah membincangkan tentang tiga kaedah berbeza untuk menukar nilai atribut src elemen img menggunakan JavaScript serta jQuery. Kami telah memahami semua kaedah secara terperinci dengan melaksanakannya secara praktikal di dalam contoh kod, yang membantu membina pengetahuan praktikal tentang konsep.

Atas ialah kandungan terperinci Bagaimana untuk menukar atribut src elemen img dalam JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk mencipta segi empat tepat yang menunggu kursor menuding pada objek menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mencipta segi empat tepat yang menunggu kursor menuding pada objek menggunakan FabricJS?

Artikel berkaitan

Lihat lagi