首頁 > web前端 > js教程 > 主體

javascript怎麼改變src屬性值

青灯夜游
發布: 2023-01-07 11:43:49
原創
8028 人瀏覽過

javascript改變src屬性值的方法:1、使用setAttribute()方法,語法「元素物件.setAttribute("src","屬性值")」;2、利用HTML DOM的src屬性,語法“元素物件.src="屬性值"”。

javascript怎麼改變src屬性值

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

javascript改變src屬性值

#方法1:使用setAttribute()方法

setAttribute () 方法新增指定的屬性,並為其賦指定的值。

如果這個指定的屬性已存在,則只設定/更改值。

範例:

<!DOCTYPE html>
<html>
<body>

<img  src="img/1.jpg"    style="max-width:90%"/ alt="javascript怎麼改變src屬性值" >

<p id="demo">点击按钮来改变img标签src属性的值。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
document.getElementsByTagName("img")[0].setAttribute("src","img/2.jpg"); 
}
</script>

</body>
</html>
登入後複製

效果圖:

javascript怎麼改變src屬性值

#2、使用HTML DOM物件的src屬性

<!DOCTYPE html>
<html>
<body>

<img  src="img/1.jpg"    style="max-width:90%"/ alt="javascript怎麼改變src屬性值" >

<p id="demo">点击按钮来改变img标签src属性的值。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
document.getElementsByTagName("img")[0].src="img/3.jpg"; 
}
</script>

</body>
</html>
登入後複製

效果圖:

javascript怎麼改變src屬性值

【推薦學習:javascript高階教學

以上是javascript怎麼改變src屬性值的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板