Menggunakan JavaScript dan jQuery, terdapat cara berbeza untuk menukar laluan imej yang diberikan dalam atribut src elemen 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.
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 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.
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.
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.
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 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.
Langkah - Dalam elemen
dokumen, dalam elemen
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
