javascript怎么设置img src值
时间:2021-11-15 来源:互联网
今天PHP爱好者为您带来设置方法:1、利用元素对象的src属性,语法“img元素对象.src="属性值"”;2、利用setAttribute()方法,语法“img元素对象.setAttribute("src","属性值")”。希望对大家有所帮助。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
javascript设置img src值
方法1:利用元素对象的src属性
<!DOCTYPE html>
<html>
<body>
<img src="img/1.jpg" width="200" />
<p id="demo">点击按钮来改变img标签的内容。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction() {
var img = document.getElementsByTagName("img")[0];
img.src = "img/2.jpg";
}
</script>
</body>
</html>
效果图:
方法2:利用setAttribute()方法
setAttribute() 方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值。
<!DOCTYPE html>
<html>
<body>
<img src="img/1.jpg" width="200" />
<p id="demo">点击按钮来改变img标签的内容。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction() {
var img = document.getElementsByTagName("img")[0];
img.setAttribute("src","img/3.jpg");
}
</script>
</body>
</html>
效果图:
以上就是javascript怎么设置img src值的详细内容,更多请关注php爱好者其它相关文章!
-
天空梗是什么梗?揭秘网络爆火天空表情包的搞笑起源与玩法 2025-09-15
-
想知道天籁是什么梗?揭秘网络热词天籁的爆笑来源和流行用法! 2025-09-15
-
想知道天蓝怪是什么梗吗?揭秘这个火爆网络的神秘热词,让你秒懂潮流! 2025-09-15
-
天蓝怪行为是什么梗?揭秘网络爆火神秘现象背后的搞笑真相! 2025-09-15
-
重返未来:1999新角色野树莓-野树莓抽取建议 2025-09-15
-
以闪亮之名全新主线之旅-章节第36章即将开启 2025-09-15