使用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.