如何在JavaScript / jQuery中更改img元素的src屬性？-js教程-PHP中文網

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 23, 2023 pm 04:49 PM

使用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 id="Change-the-src-attribute-of-an-img-element">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="/static/imghwm/default1.png"  data-src="https://img.php.cn/"  class="lazy"  src =  "https://img.php.cn/" id = "image" alt="如何在JavaScript / jQuery中更改img元素的src屬性？" > <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 id="Change-the-src-attribute-of-an-img-element-using-jQuery">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="/static/imghwm/default1.png"  data-src="https://img.php.cn/"  class="lazy"  src = "https://img.php.cn/" id = "image" alt="如何在JavaScript / jQuery中更改img元素的src屬性？" > <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 id="Changing-the-src-attribute-of-an-img-element-using-jQuery">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="/static/imghwm/default1.png"  data-src="https://img.php.cn/"  class="lazy" id = "image" alt="如何在JavaScript / jQuery中更改img元素的src屬性？" > <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。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。