JS动态修改图片的URL(src)的方法


Posted in Javascript onApril 01, 2015

本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下:

下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的

<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
document.getElementById("myImage").src="hackanm.gif";
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98">
<br><br>
<input type="button" onclick="changeSrc()" value="Change image">
<p><b>Note:</b> The src property can be changed at any time. 
However, the new image inherits the height and width
attributes of the original image,
if not new height and width properties are specified.</p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js 替换
Feb 19 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
javascript获取元素的计算样式
May 24 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
JavaScript之数组(Array)详解
Apr 01 #Javascript
JavaScript数据类型详解
Apr 01 #Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 #Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 #Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 #Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 #Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 #Javascript
You might like
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php简单判断文本编码的方法
2015/07/30 PHP
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
Python格式化输出%s和%d
2018/05/07 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
如何获取Python简单for循环索引
2019/11/21 Python
匡威德国官网:Converse德国
2019/01/26 全球购物
C语言面试题
2013/05/19 面试题
一份创业计划书范文
2014/02/08 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
优秀校长事迹材料
2014/12/24 职场文书
人工作失职检讨书
2015/05/05 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
Nginx配置之禁止指定IP访问
2022/05/02 Servers