<!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. JavaScript中思考do...while 和 while语句的区别

    Do...while和while...do的区别在于对于临界值的测试上.当在执行的时候只选择临界值来测试时,你会发现do...while至少要执行一次,而while...do则一次都不会执行.但是,当 ...

  2. HZAU 1199 Little Red Riding Hood（DP）

    Little Red Riding Hood Time Limit: 1 Sec  Memory Limit: 1280 MBSubmit: 853  Solved: 129[Submit][Stat ...

  3. 2017 Hackatari Codeathon C. Arcade（DP）（滚动数组）

    C. Arcade time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...

  4. Sd - 数据库事务

    SQL92事务的隔离级别 SQL 标准用三个必须在并行的事务之间避免的现象定义了四个级别的事务隔离. 这些不希望发生的现象是:       脏读(dirty reads):一个事务读取了另一个未提交的 ...

  5. [BZOJ4818][SDOI2017]序列计数(动规+快速幂)

    4818: [Sdoi2017]序列计数 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 972  Solved: 581[Submit][Status ...

  6. 【二分答案+智障的字符串hash】BZOJ2946-[Poi2000]公共串(Ranklist倒一达成!!!!!)【含hash知识点】

    [题目大意] 给出几个由小写字母构成的单词,求它们最长的公共子串的长度. [字符串hash的小笔记] hash[i]=(hash[i-1]*p+idx(s[i]))%mod,idx为映射值,一般a.. ...

  7. Educational Codeforces Round 8 C. Bear and String Distance 贪心

    C. Bear and String Distance 题目连接: http://www.codeforces.com/contest/628/problem/C Description Limak ...

  8. iOS笔记 基于MKNetworkKit的断点续传

    http://iiiyu.com/2012/07/07/learning-ios-notes-eight/

  9. MYSQL复习笔记5-select-from-where子句

    Date: 20140125Auth: Jin参考:http://dev.mysql.com/doc/refman/5.1/zh/sql-syntax.html#select一.select子句主要定 ...

  10. 【java】【多线程】等待开启的多个线程都执行完成，再做事情，怎么实现

    今天在controller中写一个接口用来测试模拟多个请求同时到达 下订单的情况, 怎么能有效保证高并发下的库存和销量的一致性呢?[具体实现方法:https://www.cnblogs.com/sxd ...