使用JavaScript和jQuery，有不同的方法來更改在HTML文件中給出的元素的src屬性的圖片路徑。
使用JavaScript更改img元素的src屬性的方法−
使用JavaScript中的src屬性。
#使用jQuery更改img元素的src屬性的方法−
使用 attr() 方法
#使用prop()方法
#讓我們逐一詳細討論上述列出的更改img元素src的方法。
JavaScript允許我們使用src屬性來取得已經指派給它的值，同時也可以更新或變更相同屬性的值。這是一種非常常見的更改img元素的src屬性值的方法。
以下語法將向您解釋如何在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.
在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屬性：###Change the src attribute of an img element using jQuery
The image shown below will be changed once you click the button.
prop(" attribute_name ", " new_value ");
prop({ attribute_name: new_value, attribute_name: new_value });
Changing the src attribute of an img element using jQuery
The image shown below will be changed once you click the button.
在本文中，我們討論了使用 JavaScript 和 jQuery 更改 img 元素的 src 屬性值的三種不同方法。透過在程式碼範例中實際實現它們，我們詳細了解了所有方法，這有助於建立概念的實踐知識。
以上是如何在JavaScript / jQuery中更改img元素的src屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
