<body>

<script>

function changeImage(){

    var s = document.getElementById('myimage');

    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";

}

</script>

<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="" height="">

<p>点击灯泡就可以打开或关闭这盏灯</p>

</body>
以上实例中代码 element.src.match("bulbon") 的作用意思是：
检索 <img> 里面 src 属性的值有没有包含 bulbon 这个字符串，
如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，
若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif
match方法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

　该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

 

javascript 两张图片切换 三目运算符的更多相关文章

  1. echarts常用方法，legend状态支持两张图片切换（四）

    在UI设计的时候,可能我们在使用echarts时,legend是用图片渲染的,未选中的legend是用置灰的图片展示的.即彩色图片,置灰图片交互切换. 主要代码如下: //图例事件 let lgdt ...

  2. mui 顶部选项卡的两种切换方式

    mui 顶部选项卡的两种切换方式 第一种main页面 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  3. 使用CSS3中Canvas 实现两张图片合成一张图片【常用于合成二维码图片】

    CSS3 Canvas 实现两张图片合成一张图片 需求 需求:在项目中遇到将一张固定图片和一张二维码图片合成一张新图片,并且用户能够将图片保存下载到本地. 思路:使用 CSS3 中的 Canvas 将 ...

  4. opencv_判断两张图片是否相同

    QQ:231469242 pip install opencv 如果找不到版本,去非官方下载opencv第三方包http://www.lfd.uci.edu/~gohlke/pythonlibs/ 下 ...

  5. HTML两张图片叠加问题的进一步修改

    要想两张图片叠加,只需在circle添加一个Position:absolute就OK了 以上几步,很多大侠前辈都已经说过,相信不用再啰嗦,我想说的是一种扩展,将示例放到右边,可能因为我悟性低,研究了一 ...

  6. Java 比较两张图片的相似度

    import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO; /** * 比较两张图片 ...

  7. iOS把两张图片合成一张图片

    0x00 步骤 先读取两张图片把创建出CGImageRef 创建上下文画布 把图片依次画在画布指定位置上 从上下文中获得合并后的图片 关闭上下文 释放内存 0x01 代码实现 - (void)comp ...

  8. JavaScript实现回车键切换输入框焦点

    用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...

  9. javascript两种定时器的使用及其清除

    <!--示例代码如下:--><!DOCTYPE html> <html> <body> <p>A script on this page s ...

随机推荐

  1. FJUT3568 中二病也要敲代码（线段树维护区间连续最值）题解

    题意:有一个环,有1~N编号,m次操作,将a位置的值改为b,问你这个环当前最小连续和多少(不能全取也不能不取) 思路:用线段树维护一个区间最值连续和.我们设出两个变量Lmin,Rmin,Mmin表示区 ...

  2. 【学习】Hall’s Marriage Theorem

    其实是在做题时遇到这个定理的. 这个定理的图论意义是: 对于一个二分图\(G=\{X+Y,E\}\),它满足: \(\forall W \subseteq X, \, |W| \leq |N_G(W) ...

  3. （转）Nginx学习

    (二期)15.负载均衡nginx [课程15]nginx安装.xmind0.2MB [课程15]Nginx能做什么.xmind0.1MB [课程15]负载均衡nginx.xmind96.7KB [课程 ...

  4. sqlserver 触发器的运行关键字

    触发器执行顺序根据 before 和 after 关键字决定. 使用before 关键字:触发器的执行是在数据的插入.更新或删除之前执行的.使用after关键字:触发器的执行是在数据的插入.更新或删除 ...

  5. C# 递归模型定义。赋值

    https://blog.csdn.net/wumiju/article/details/80429412 public partial class ProductTypeModel:DbEntity ...

  6. .Net Core 本地化&全球化 实践

    介绍: 所有有关本地化的数据获取,都是从统一的一个资源文件中获取 1.创建虚拟类.资源文件,用于作为本地化数据的获取源 2.Configure localization:支持view.data ann ...

  7. 5、lvs使用进阶(01)

    四层.七层负载均衡的区别  https://jaminzhang.github.io/lb/L4-L7-Load-Balancer-Difference/   netfilter/iptables简介 ...

  8. C#深入多线程

    主线程: th = Thread.CurrentThread; //现在的线程为主线程 th.Name = "MainThread"; //set线程名字:主线程本身没有名字 th ...

  9. react-redux的mapStateToProps可取到state值但不会注入props

    一.问题描述 想通过react-redux和redux实现react组件之间的通信,reducer.action.store都编写正确,mapDispatchToProps也能正确传值.唯独mapSt ...

  10. FreeCodeCamp----Intermediate Algorithm Scripting解法

    Finders Keepers 写一个 function,它浏览数组(第一个参数)并返回数组中第一个通过某种方法(第二个参数)验证的元素. 如果你被卡住了,记得开大招 Read-Search-Ask. ...