<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. Flask学习【第1篇】：Flask介绍

    Flask介绍(轻量级的框架,非常快速的就能把程序搭建起来) Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是So ...

  2. POJ 3264 Balanced Lineup （线段树查找最大最小值）

    http://poj.org/problem?id=3264 题意:给你一个长度为n的序列a[N] (1 ≤ N ≤ 50000),询问Q(1 ≤ Q ≤ 200000) 次,每次输出[L, R]区间 ...

  3. FJNU2018低程F jq解救fuls （贪心乱搞）题解

    题目描述 一天fuls被邪恶的"咕咕咕"抓走了,jq为了救fuls可谓是赴汤蹈火,费了九牛二虎之力才找到了"咕咕咕"关押fuls的地方. fuls被关在一个机关 ...

  4. hihoCoder week6 01背包

    01背包 题目链接 https://hihocoder.com/contest/hiho6/problem/1 #include <bits/stdc++.h> using namespa ...

  5. R: Coercing LHS to a list

    #  Coercing LHS to a list expr_3$ID<-rownames(expr_3) # OK ids<-rownames(expr_3)expr_4<-cbi ...

  6. Ambari配置Hive，Hive的使用

    mysql安装,hive环境的搭建 ambari部署hadoop 博客大牛:董的博客 ambari使用 ambari官方文档 hadoop 2.0 详细配置教程 使用Ambari快速部署Hadoop大 ...

  7. RabbitMQ.client消息队列

    doc 介绍 分类&&典型应用 中文文档 使用

  8. GTK 菜单的创建详解

    1 定义 1.1 菜单由菜单条和菜单项组成,它们的定义如下所示: 菜单项(GtkMenuItem):添加到菜单条或下拉菜单中构件 顶层菜单项:添加到菜单条上的菜单项称为顶层菜单项 下拉菜单(GtkMe ...

  9. transient关键字详解

    作用 1,一旦变量被transient修饰,变量将不再是对象持久化的一部分,该变量内容在序列化后无法获得访问. 2,transient关键字只能修饰变量,而不能修饰方法和类.注意,本地变量是不能被tr ...

  10. 使用MVCPager做AJAX分页所需要注意的地方

    1.版本问题,推荐使用2.0以上,对ajax支持才比较的好了 2.当需要使用页索引输入或下拉框以及使用Ajax分页模式时,必须用Html.RegisterMvcPagerScriptResource方 ...