首頁 > web前端 > js教程 > 如何在JavaScript / jQuery中更改img元素的src屬性?

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

WBOY
發布: 2023-08-23 16:49:14
轉載
2692 人瀏覽過

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板