<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 <style>

 div.testClass {

 background-color: gray;

 }

 </style>

 </head>

 <body>

 <div id="test" style="width:250px;height:100px;">

 sssssssssssss

 </div>

 <input type="button" value="toggleClassTest" onclick="toggleClassTest();" />

 </body>

 <script type="text/javascript">

 function hasClass(obj, cls) {

 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));

 }

 function addClass(obj, cls) {

 if (!this.hasClass(obj, cls)) obj.className += " " + cls;

 }

 function removeClass(obj, cls) {

 if (hasClass(obj, cls)) {

 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');

 obj.className = obj.className.replace(reg, ' ');

 }

 }

 function toggleClass(obj, cls) {

 if (hasClass(obj, cls)) {

 removeClass(obj, cls);

 } else {

 addClass(obj, cls);

 }

 }

 function toggleClassTest() {

 var obj = document.getElementById('test');

 toggleClass(obj, "testClass");

 }

 </script>

 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div.testClass {
background-color: gray;
}
</style>
</head>
<body>
<div id="test" style="width:250px;height:100px;">
sssssssssssss
</div>
<input type="button" value="toggleClassTest" onclick="toggleClassTest();" />
</body>
<script type="text/javascript">
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}
function toggleClass(obj, cls) {
if (hasClass(obj, cls)) {
removeClass(obj, cls);
} else {
addClass(obj, cls);
}
}
function toggleClassTest() {
var obj = document.getElementById('test');
toggleClass(obj, "testClass");
}
</script>
</html>

实现toggleClass功能的更多相关文章

  1. Jquery 实现原理深入学习(3)

    前言 1.总体结构 √ 2.构建函数 √ 3.each功能函数实现 √ 4.map功能函数实现 √ 5.sizzle初步学习 6.attr功能函数实现 7.toggleClass功能函数实现(好伤) ...

  2. toggleClass() 方法做类似于微信扣扣点击语音图标按钮变成切换到语音输入功能，点击键盘图标按钮切换到文字输入状态的效果

    就是这种效果的类似. <html><head><script type="text/javascript" src="/jquery/jqu ...

  3. JQuery的一些简单功能

    JQuery js的缺点总结 1.入口函数只能有一个,如果出现多个,后面的会覆盖掉前面的 2.代码容错性差,容易出错,出错会导致后面的代码不执行 3.存在浏览器兼容性,比如innerText在火狐浏览 ...

  4. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  5. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  6. JQuery功能查询页

    JQuery在前端开发中已经是常用的不能再常用的库了.最近的项目中使用到了JQuery,我第一次接触它的时候为了学习,把常用的操作指令用比较小的字体写在一页word上,打印出来贴在桌子上,用来让自己时 ...

  7. 【jQuery 分页】jQuery分页功能的实现

    自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...

  8. 夺命雷公狗---微信开发55----微信js-sdk接口开发（2）接口功能介绍之签名算法

    我们JS-SDK里面其实有不少的接口 startRecord---录音 stopRecord---停止录音 playVoice---播放 pauseVoice---暂停播放 uploadImage-- ...

  9. jQuery 基本实现功能模板

    下面是列出了基本功能的实现 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu ...

随机推荐

  1. LOJ #6278. 数列分块入门 2-分块(区间加法、查询区间内小于某个值x的元素个数)

    #6278. 数列分块入门 2 内存限制:256 MiB时间限制:500 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: hzwer 提交提交记录统计测试数据讨论 6   题目描述 给出 ...

  2. Calendar类进行日期操作

    import java.util.Calendar; import java.util.Date; import java.util.GregorianCalendar; /** * 测试日期类 * ...

  3. python判断一个对象是可迭代?

    1.介绍一下如何判断一个对象是可迭代的? 通过collections模块的Iterable类型判断: >>> from collections import Iterable > ...

  4. HDU 1011 Starship Troopers【树形DP/有依赖的01背包】

    You, the leader of Starship Troopers, are sent to destroy a base of the bugs. The base is built unde ...

  5. 洛谷P1955 [NOI2015] 程序自动分析 [并查集，离散化]

    题目传送门 题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或x ...

  6. Sqli-labs less 13

    Less-13 本关我们输入username:admin' Password: (随便输) 进行测试 可以看到报错了,错误为: You have an error in your SQL syntax ...

  7. Oracle concat

    如果要进行多个字符串的拼接的话,可以使用多个CONCAT()函数嵌套使用,上面的SQL可以如下改写:SELECT CONCAT(CONCAT(CONCAT('工号为',FNumber),'的员工姓名为 ...

  8. [Codeforces #494] Tutorial

    记录下一开始写错的两道水题 E: 先建出直径,然后在保证直径不变的情况下按照最大度数贪心就好了 注意一下一开始的特判 #include <bits/stdc++.h> using name ...

  9. 【构造】CDOJ1607 大学生足球联赛

    请自行百度逆时针轮转法 //单循环赛 逆时针轮转法 #include<cstdio> using namespace std; int n,a[70]; int main(){ scanf ...

  10. [BZOJ1003](ZJOI 2006) 物流运输trans

    [题目描述] 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格的管理和跟 ...