js match 来点击切换图片
定义和用法
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
返回值
成功: ["on", index: 66, input: "http://127.0.0.1:8020/js/%E8%8F%9C%E9%B8%9F%E6%95%99%E7%A8%8B/img/on.png"]
失败: null
具体实现
html:
<img src="./img/on.png" id="change" onclick="changeImg()" />
js:
function changeImg(){
var element = document.getElementById("change");
if(element.src.match("on")){
element.src = "./img/off.png";
}else{
element.src = "./img/on.png";
}
}
结果
点击后
总结
match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。
js match 来点击切换图片的更多相关文章
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- 22.用demo通过点击切换图片路径
用demo通过点击切换图片路径 html: <img src="images/driving.png" class="driving"/> js: ...
- 利用DOM的方式点击切换图片及修改文字
本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- Android之点击切换图片
package com.example.SlidePictures; import java.util.Timer; import java.util.TimerTask; import com.ex ...
- Fragment 回退栈 传递参数,点击切换图片使用Fragment ListView
Fragment回退栈 类似与Android系统为Activity维护一个任务栈,我们也可以通过Activity维护一个回退栈来保存每次Fragment事务发生的变化. 如果你将Fragment任务 ...
- C# 使用PictureBox控件--点击切换图片
效果: 1. 2. 代码: private Boolean fals = true; /// <summary> /// 单击事件 /// </summary> /// < ...
- JS练习:切换图片
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- 根据日期切换图片KFX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- MySQL5.7本地首次登录win10报错修改
1.打开MySQL目录下的my.ini文件,在文件的最后添加一行“skip-grant-tables”,保存并关闭文件.(Win10默认安装,my.ini在C:\ProgramData\MySQL\M ...
- CentOS与FreeBSD环境下安装filebeat
业务服务器CentOS与FreeBSD共存(痛苦囧...) CentOS rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch ...
- jdk8--十大新特性
https://www.cnblogs.com/dennyzhangdd/p/6722445.html 一.十大特性 1.Lambda表达式 2.Stream函数式操作流元素集合 3.接口新增:默认方 ...
- 【[Offer收割]编程练习赛13 A】风格不统一如何写程序
[题目链接]:http://hihocoder.com/problemset/problem/1501 [题意] [题解] 模拟题 [Number Of WA] 1 [完整代码] #include & ...
- 【[Offer收割]编程练习赛12 B】一面砖墙
[题目链接]:http://hihocoder.com/problemset/problem/1494 [题意] [题解] 显然只要记住每一行的各个砖头的间隔处的坐标有多少个就好了: ->也就对 ...
- [HZOI 2016]tree—增强版
[HZOI 2016]tree—增强版 注意事项 为了体现增强版,题目限制和数据范围有所增强: 时间限制:1.5s 内存限制:128MB 对于15% 的数据,1<=N,Q<=1000. 对 ...
- 暑假集训D16总结
考试 日常爆炸= = T1 一看就是个树规,然而不会写方程= = T2 一看就是个分块,然而不会分= = T3 终于有点头绪,推了两个小时的30分部分分情况,然后打挂了= = 我玩个鬼啊 其实听完,觉 ...
- [TyvjP1515] 子串统计 [luoguP2408] 不同子串个数(后缀数组)
Tyvj传送门 luogu传送门 经典题 统计一个字符串中不同子串的个数 一个字符串中的所有子串就是所有后缀的前缀 先求出后缀数组,求出后缀数组中相邻两后缀的 lcp 那么按照后缀数组中的顺序遍历求解 ...
- Office 2003的卸载 与 Office 2013 的安装
一.Office 2003的卸载 软件:卸载Office2003.msi 运行该软件,等待几分钟即可, 二.Office 2013 的安装 1.Office Professional Plus 201 ...
- 通过JS的事件处理取得radio的值
转自:http://blog.sina.com.cn/s/blog_50a1e17401017pik.html 提前知识准备: 在一个HTML文档中,每个元素都可以设置ID和NAME属性. 其中ID属 ...