本文介绍如何使用 JavaScript 动态修改 HTML 图片元素的 src 属性。通过 document.getElementById 获取元素引用,直接赋值新路径即可实现图片切换。示例包含完整的 HTML 结构与触发按钮的点击事件处理,适用于需要前端动态更新图片的场景。
JavaScript 动态修改图片 src 的实现方法
本文通过具体实例演示了如何利用 JavaScript 动态更改图片的 src 属性,供读者参考学习。
具体实现代码如下:
<!DOCTYPE html>
<html>
<head>
<title>使用js改变图片</title>
<script>
function changeImage() {
var element = document.getElementById('myimage');
element.src = "image/a/053120.jpg";
}
</script>
</head>
<body>
<h1>使用js改变图片</h1>
<p>请点击按钮 <a href="a/html/054210.htm">原文</a></p>
<img id="myimage" src="image/a/054210.jpg" alt="足球宝贝" />
<input name="meinv" type='button' value="改变图片" onclick="changeImage()">
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。