今天做项目时其中一个环节需要用到js修改图片src属性切换图片，现在来记录一下

以下是示例：

html

<img src="/before.jpg" id="img" />

JavaScript

document.getElementById("img").src="/after.jpg";

如此就能把id为"img"的src改成自己想要改变的图片

【JavaScript】修改图片src属性切换图片的更多相关文章

  1. 网页中通过js修改img的src属性刷新图片时，图片缓存问题现象表述及问题解决【ps：引用大神案例http://blog.csdn.net/goodleiwei/article/details/50737548】

    问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过fir ...

  2. 【转】Jquery修改image的src属性，图片不加载问题

    1.当点击某一按钮的时候,把图片域中的图片改变一下    <img id="randimg" src="/servlet/CreateValidateNum&quo ...

  3. vue2.0动态绑定图片src属性值初始化时报错

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <te ...

  4. 使用定时器通过改变图片的src来切换图片

    点击以后开始自动切换图片 $("#page3_cover_1_back").click(function(){ var i=3; var haha=setInterval(func ...

  5. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  6. 用js动态的改变img标签里面的src属性实现图片的循环切换

    JS:根据循环切换的条件可以用 document.getElementById('').src=''设置, 或者jquery方法: $('#id').attr('src','图片名称’): 具体: i ...

  7. imagebutton 设置了src属性的图片更换

    <ImageButton android:id="@+id/mediacontroller_play_pause" android:layout_width="wr ...

  8. android 图片浏览器滑动切换图片

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  9. C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字

    下面附下载地址. http://download.csdn.net/download/njxiaogui/10002058 1.跑马灯效果,图片连续循环滚动,图片下面并可附文字描述,图片是从数据库中获 ...

随机推荐

  1. Linux中vim编辑器的缩进的功能键

    vim编程时,经常需要对代码进行缩进处理,以增加程序的可读性和后期的代码维护. 可以采用多种方式达到缩进的目的: 1) 命令模式(command mode) 2) Visual模式(visual mo ...

  2. 扒前端网页js代码

    红框是前端代码:输出script中 的内容 可以把红色区域的前端代码 转为java代码 来扒别的网站前端代码 转换成java代码之后,在控制台输入以下代码,点击回车则可以去打印出当前网页上的js fo ...

  3. nodejs入门学习笔记二——解决阻塞问题

    在最开始,我们要弄清楚node会什么会存在阻塞? node是这么标榜自己的:“在node中除了代码,所有一切都是并行执行的!” 意思是,Node.js可以在不新增额外线程的情况下,依然可以对任务进行并 ...

  4. Second Highest Salary

    Write a SQL query to get the second highest salary from the Employee table. +----+--------+ | Id | S ...

  5. Java的HashMap和HashTable(转)

    来源:http://www.cnblogs.com/devinzhang/archive/2012/01/13/2321481.html 1. HashMap 1)  hashmap的数据结构 Has ...

  6. 学习笔记：MDN的CSS

    HTML用于定义内容的结构和语义,CSS用于设计风格和布局. CSS规则由选择器和声明块组成:声明由属性(properties)和属性值组成. CSS介绍: 盒=框=box,边界=border,内边距 ...

  7. JavaScript获取样式值的几种方法学习总结

    本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...

  8. 【ros depthimage_to_laser kinect2】

    kinect2的深度图可以转换成激光来用,使用depthimage_to_laser 这个tf是用来给rviz显示的 1)开启kinect2 rosrun kinect2_bridge kinect2 ...

  9. 正则表达式---01 js篇

    本文主要针对js中正则表达式的实践操作,来让大家对正则表达式有一个入门清晰的了解. 正则表达式推荐学习网址:http://www.runoob.com/regexp/regexp-tutorial.h ...

  10. c++树的表示方法

    c++树的节点的表示方法: typedef struct Node *Tree; struct Node { int data; Node *left; Node *right; int flag; ...