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/ ...
随机推荐
- Centos下安装mysql(二进制版)
1.下载安装包,选择相应的平台.版本,比如,选择64位Linux平台下的MySQL二进制包“Linux-Generic (glibc 2.5)(x86,64-bit),Compressed” 如:#w ...
- Flask - 请求处理流程和上下文源码分析
目录 Flask - 请求处理流程和上下文 WSGI Flask的上下文对象及源码解析 0. 请求入口 1.请求上下文对象的创建 2. 将请求上下文和应用上下文入栈 3.根据请求的URl执行响应的视图 ...
- 【Codeforces 158B】Taxi
[链接] 我是链接,点我呀:) [题意] 每辆车可以载重4个人. 一共有n个组,每个组分别有s[i]个人. 要求每个组的人都在同一辆车里面. 问最少需要多少辆车 [题解] 将每个组的人数从小到大排序. ...
- CentOS 7.3降低内核版本为7.2
查看当前内核版本: [root@nineep ~]# uname -r 2.3.10.0-514.2.2.el7.x86_64 查看当前发行版本: [root@nineep ~]# cat /etc ...
- Spring MVC-表单(Form)标签-单选按钮集合(RadioButtons)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_radiobuttons.htm 说明:示例基于Spring MVC 4.1.6. ...
- [Fri 26 Jun 2015 ~ Thu 2 Jul 2015] Deep Learning in arxiv
Natural Neural Networks Google DeepMind又一神作 Projected Natural Gradient Descent algorithm (PRONG) bet ...
- VassistX 凝视 模板
避免头文件反复包括宏定义: #ifndef $FILE_BASE_UPPER$_H_ #define $FILE_BASE_UPPER$_H_ $selected$ #endif // $FILE_B ...
- SerializeUtil 序列化,反序列化工具类
package cloud.app.prod.home.utils; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutp ...
- 一条SQL语句求前面记录的平均值
有算法要求如下: For (i=1,i<=10,i++) { ta[i] = (t[1] + t[2] + ... + t[i]) / i; } 用一条SQL语句实现它: 分别用表变量 @ta ...
- Android中Calendar类的用法总结
Calendar是Android开发中需要获取时间时必不可少的一个工具类,通过这个类可以获得的时间信息还是很丰富的,下面做一个总结,以后使用的时候就不用总是去翻书或者查资料了. 在获取时间之前要先获得 ...