<!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. 234. Palindrome Linked List【Easy】【判断链表是否回文】

    Given a singly linked list, determine if it is a palindrome. Example 1: Input: 1->2 Output: false ...

  2. 安装 SQL Server 2008 和管理工具 SQL Server 2008 management studio 及相关问题解决

    Sql Server 2008 问题小总结 http://www.lihengyu.com/blog/4877.html 安装 SQL Server 2008 和管理工具 SQL Server 200 ...

  3. Struts2中使用Session

    嗯,没错,过了这么长时间我还在做我的注册和登录. 登陆的部分自然是从数据库中查找响应的用户信息,然后把一个user放到session里, Action中代码如下: public String Logi ...

  4. python 写文件write(string), writelines(list) ，读文件

    read()方法用于直接读取字节到字符串中,可以接参数给定最多读取的字节数,如果没有给定,则文件读取到末尾. readline()方法读取打开文件的一行(读取下个行结束符之前的所有字节),然后整行,包 ...

  5. 【模拟退火】Petrozavodsk Winter Training Camp 2017 Day 1: Jagiellonian U Contest, Monday, January 30, 2017 Problem F. Factory

    让你在平面上取一个点,使得其到给定的所有点的距离和最小. 就是“费马点”. 模拟退火……日后学习一下,这是从网上扒的,先存下. #include<iostream> #include< ...

  6. 【推导】Codeforces Round #411 (Div. 1) A. Find Amir

    1 2 3 4 5 6 7 4-5-3-6-2-7-1 答案是(n-1)/2 #include<cstdio> using namespace std; int n; int main() ...

  7. 浅谈linux系统的分区问题

    转载:http://mtoou.info/linux-fenqu/ 很多然在装linux系统时面临的最大难题就是分区问题了,由于linux分区结构和windows不同,很多人对linux分区感觉非常不 ...

  8. cocos2d-x Cygwin编译 recipe for target `obj/local/armeabi/libcocos2d.so' fail 解决办法

    在编译cocos2d-x的helloworld 或者 tests的时候. 官网上使用ndk4.ndk5,这里是使用 ndkr7b.ndkr8或ndkr8b .操作会简单很多,但是出了些小问题也是很坑人 ...

  9. log4j设置,以及中文乱码，通过过滤器输出指定级别的日志，或者指定级别范围的日志

    配置文件为默认名字log4j.properties时,放在某个模块下的resources下即可,即使有多个模块的情况下,任意一个模块的resources下有这个默认名字的文件log4j.propert ...

  10. java中各种数据类型占用字节数

    1字节(Byte)=8bit java的基本类型 类型 所占字节 byte 1 short 2 int 4 long 8 float 4 double 8 char 2 String中字母和汉字所占字 ...