<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. php高级开发参考地址

    高级开发 : http://www.cnblogs.com/bananaplan/p/The-Right-Way-For-PHPer.html

  2. JQ插入节点方法

    1.append()  appendTo()  prepend() prependTo() 2. before() insertBefore() after() insertAfter()

  3. Android中EditText焦点问题

    https://www.jianshu.com/p/3d31d681f4bc 问题:当EditText失去焦点时做内容校验 场景:用户编辑EditText将内容清空,当点击空白地方时关闭软键盘,同时校 ...

  4. 【C#】异步的用法

    1. C#5.0 加入了async, await关键字. async是在声明异步方法时使用的修饰符, 声明放在返回值之前即可,await表达式则负责消费异步操作, 不能出现在catch或finally ...

  5. Leetcode122-Best Time to Buy and Sell Stock II-Easy

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  6. Jenkins参数化构建（三）之 Jenkins从文件中读取运行参数

    安装Extended Choice Parameter插件 选择‘参数化构建过程’ maven command line中进行引用 clean test -DsuiteXmlFile=src/main ...

  7. java根据URL获取HTML内容

    之前我写脚本,是想获取HTML内容的. 但是呢...一方面编码困扰着我,于是我写了这个: java根据URL获取网页编码 然后呢,每个网站是不是GZIP还得判断,贼麻烦... 但是没办法啊,麻烦也得写 ...

  8. _battleground

    战场控制表 bgName 战场名字 bgTypeId 战场类型索引,请勿修改 cf 0 - 关闭混排:1 - 开启混排 limitHP 进入战场的最低血量,血量低于该值无法排此战场 maxRes 阿拉 ...

  9. Docker个人理解总结

    最新在学习Docker,记录下自己对Docker的理解. 一.Docker是什么? 1. Docker是一个能够把开发的应用程序自动部署到容器的开源引擎. 2.Docker使用Google公司推出的G ...

  10. win 10 安装visual studio 2013

    下载地址: http://download.microsoft.com/download/9/3/E/93EA27FF-DB02-4822-8771-DCA0238957E9/vs2013.5_ult ...