<!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. HZAU 1203 One Stroke（倍增）

    题目链接:http://acm.hzau.edu.cn/problem.php?id=1203 [题意]给你一颗完全二叉树每个节点都有一个权值,然后要你从上往下找一条链,值得链上权值的和<K,且 ...

  2. Find K Pairs with Smallest Sums -- LeetCode

    You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Define ...

  3. [BZOJ 1058] 报表统计

    Link: BZOJ 1058 传送门 Solution: 为了这道题今天下午一直都在和常数大战…… 1.对于询问1,我们记录每个数末位置的数$T[i]$和初始位置$S[i]$ 用平衡树维护所有差值, ...

  4. [Atcoder Regular Contest 061] Tutorial

    Link: ARC061 传送门 C: 暴力$dfs$就好了 #include <bits/stdc++.h> using namespace std; typedef long long ...

  5. python基础之函数对象，嵌套，名称空间和作用域

    函数对象: 函数是第一类对象的含义是函数可以被当作数据处理 函数可用于: def func(): print(‘func’) 1.引用  f = func  把内存地址赋值给f 2.当作参数传给一个函 ...

  6. PHP数组和数据结构（上）

    1.数组的声明 两种方法: 直接给数组元素赋值 使用array()函数声明 说明: (1)索引数组的下标可以是非连续的值,只要在初始化时指定非连续的下标值即可 如果指定的下标值已经声明过,则属于对变量 ...

  7. linux shell实现随机数多种方法（date,random,uuid)

    参考: http://www.cnblogs.com/chengmo/archive/2010/10/23/1858879.html $ cat /proc/sys/kernel/random/uui ...

  8. iptables最常用的规则示例

    iptables v1.4.21 iptables基础 规则(rules)其实就是网络管理员预定义的条件,规则一般的定义为“如果数据包头符合这样的条件,就这样处理这个数据包”.规则存储在内核空间的信息 ...

  9. NAND Flash大容量存储器K9F1G08U的坏块管理方法

    转: http://www.360doc.com/content/11/0915/10/7715138_148381804.shtml 在进行数据存储的时候,我们需要保证数据的完整性,而NAND Fl ...

  10. C# 中的.pdb/ .vshost.exe/ .vshost.exe.manifest文件

    转自 C# 中的.pdb/ .vshost.exe/ .vshost.exe.manifest文件讨论 pdb文件: 英文全称:Program Database File 中文全称:程序数据库 文件 ...