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实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
JS中的BOM应用
Feb 02 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 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
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python异常处理总结
2014/08/15 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
python的socket编程入门
2018/01/29 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python批量修改文件名的示例
2020/09/27 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
初级Java程序员面试题
2016/03/03 面试题
机电一体化专业推荐信
2013/12/03 职场文书
大学生创业项目方案
2014/03/08 职场文书
静心口服夜广告词
2014/03/20 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
住房租房协议书
2014/08/20 职场文书
国庆促销活动总结
2014/08/29 职场文书
预备党员半年考察意见
2015/06/01 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
python blinker 信号库
2022/05/04 Python