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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
Underscore源码分析
Dec 30 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
jQuery插件之validation插件
Mar 29 jQuery
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JS原型链怎么理解
2016/06/27 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
vue 组件基础知识总结
2021/01/26 Vue.js
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python可变参数用法实例分析
2017/04/02 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python之拟合的实现
2019/07/19 Python
Python猴子补丁知识点总结
2020/01/05 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
护理职业应聘自荐书
2013/09/29 职场文书
绩效管理实施方案
2014/03/19 职场文书
三字经教学反思
2014/04/26 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年护士节活动总结
2015/02/10 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis