首頁 > 文章 > web前端 > 如何在JavaScript / jQuery中更改img元素的src屬性？

如何在JavaScript / jQuery中更改img元素的src屬性？

WBOY轉載: 2023-08-23 16:49:142631瀏覽

使用JavaScript和jQuery，有不同的方法來更改在HTML文件中給出的如何在JavaScript / jQuery中更改img元素的src屬性？元素的src屬性的圖片路徑。

使用JavaScript更改img元素的src屬性的方法−

使用JavaScript中的src屬性。

#使用jQuery更改img元素的src屬性的方法−

使用 attr() 方法
#使用prop()方法

#讓我們逐一詳細討論上述列出的更改img元素src的方法。

在JavaScript中使用src屬性

JavaScript允許我們使用src屬性來取得已經指派給它的值，同時也可以更新或變更相同屬性的值。這是一種非常常見的更改img元素的src屬性值的方法。

Syntax

以下語法將向您解釋如何在JavaScript中使用src屬性來變更img元素的src屬性的值 -

Selected_image_element.src = " new value ";

讓我們透過程式碼範例來理解這種方法的實際實作。

演算法

Step 1 − In the first step, we will add a img element with a src attribute associated with it, whose value we will change later using the src property in JavaScript.
第二步 - 在這一步驟中，我們將新增一個帶有onclick事件的按鈕元素，當使用者點擊按鈕時呼叫一個函數來改變圖像的src。
步驟3 - 在下一步中，我們將定義一個JavaScript 函數，在該函數中，我們將使用其ID 來取得img 元素，然後使用src 屬性來變更src 屬性，並在兩個影像之間切換。
Step 4 − In the last step, we will assign the function to the onclick event defined in the last step to see the changes on user screen.

<script><src></script>

##Example的中文翻譯為：範例

下面的範例將向您解釋如何在JavaScript中實際使用src屬性來變更img的src屬性。

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

在這個範例中，我們使用JavaScript中的src屬性來改變HTML文件中img元素的src屬性。在這裡，每次點擊按鈕時，我們在兩個圖像之間切換。

在jQuery中使用attr()方法

我們也可以使用JavaScript中的attr()方法來更改src屬性。

attr()方法

- attr()方法接受兩個參數，第一個參數是要變更的屬性名稱，以字串形式表示，另一個參數是要指派給屬性的新值。 Syntax

以下語法將向您解釋帶有參數的attr()方法的實作方式−

attr(" attribute_name ", " new_value ");

讓我們透過程式碼範例詳細了解這種方法的實作。

演算法

第一步

- 在文件的

元素中的

元素的

中，我們將新增jQuery連結

#########第二步### - 在這一步驟中，我們將使用一個帶有src屬性的img元素，並在後續使用jQuery的attr()方法來修改它 ###### #########第三步### - 在第三步驟中，我們將新增一個按鈕元素，該元素將在稍後使用jQuery給予一個onclick事件和一個函數 ###### #########第四步驟### − 在下一步中，我們將使用jQuery的###「$」###語法來取得每個元素，並對每個元素執行任務。 ###### #########第五步### − 在最後一步中，我們將使用jQuery的###on()###方法為按鈕分配一個onclick事件，這樣當使用者點擊按鈕時，它會呼叫其中給定的函數，並且更改對使用者可見。 ###### ### ###Example###的中文翻譯為：###範例### ###下面的範例將說明在jQuery中使用attr()方法來變更img元素的src屬性：###

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

###使用jQuery中的prop()方法### ###與attr()方法類似，jQuery也提供了prop()方法來將任何屬性的值變更為新值。 ### ######prop() method### − The prop() method can be used as we used the attr() method in previous example. It takes property name and the new value to be assigned as parameters.## # ###我們可以使用prop()方法將值設定為單一屬性和多個屬性。 ### ###Syntax### ###Following syntax will show you how you can use the prop() method for different purposes −### ######更改特定屬性的值### −###

prop(" attribute_name ", " new_value ");

######更改多個屬性的值### −###

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

###在第二種語法中，我們同時為多個屬性提供了它們的新值。 ### ###讓我們透過程式碼範例詳細了解prop()方法的用法。 ### ###演算法### ###這個範例的演算法幾乎與前一個範例的演算法相似。您只需要將前一個演算法中的attr()方法替換為prop()方法即可完成工作。 ### ###Example###的中文翻譯為：###範例### ###下面的範例將向您解釋prop()方法如何變更HTML文件中img元素的src屬性的值 -###

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

###在上面的範例中，我們使用了jQuery中的prop()方法來改變HTML文件中img元素的src屬性。 ###

在本文中，我們討論了使用 JavaScript 和 jQuery 更改 img 元素的 src 屬性值的三種不同方法。透過在程式碼範例中實際實現它們，我們詳細了解了所有方法，這有助於建立概念的實踐知識。

以上是如何在JavaScript / jQuery中更改img元素的src屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 建立一個等待遊標懸停在物件上的矩形？下一篇：如何使用 FabricJS 建立一個等待遊標懸停在物件上的矩形？

看更多