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中通过父级进行查找定位元素
Jun 15 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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 Xdebug的安装与使用详解
2013/06/20 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
初识Node.js
2015/03/20 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
axios基本入门用法教程
2017/03/25 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
python缩进区别分析
2014/02/15 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
python实现自动清理重复文件
2020/08/24 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
20岁生日感言
2014/01/13 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
银行贷款收入证明
2014/10/17 职场文书
2015中秋祝酒词
2015/08/12 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
使用golang编写一个并发工作队列
2021/05/08 Golang
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
图文详解nginx日志切割的实现
2022/01/18 Servers
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android