<!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. JavaWeb中常见的乱码处理(亲测)

    常见编码方式: ISO-8859-1  西欧码 GB2312  简体中文码 GBK   大五码 UTF-8 全球码(推荐) 1.页面(HTML,JSP,Servlet) <%@ page lan ...

  2. Spring MVC源码——Root WebApplicationContext

    目录 Spring MVC源码--Root WebApplicationContext 上下文层次结构 Root WebApplicationContext 初始化和销毁 ContextLoaderL ...

  3. 五种常用的C/C++编译器对64位整型的支持

    变量定义 输出方式 gcc(mingw32) g++(mingw32) gcc(linux i386) g++(linux i386) MicrosoftVisual C++ 6.0 long lon ...

  4. luogu P2254 [NOI2005]瑰丽华尔兹

    题目链接 luogu P2254 [NOI2005]瑰丽华尔兹 题解 为什么我我我不放放放bzoj的链接呢? 因为打的暴力啊,然后bzojT了呀QAQQQQQ(逃 然后luogu竟然过了呀呀呀 dp[ ...

  5. noip 2008 传纸条

    题目描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸运的是 ...

  6. 【混合背包】CDOJ1606 难喝的饮料

    #include<cstdio> #include<algorithm> using namespace std; int n,V,op[20010],c[20010],w[2 ...

  7. 【树形dp】vijos P1180 选课

    题解: http://www.cppblog.com/rakerichard/articles/105004.html 惊了,讨论子树大小能否dp真鸡儿麻烦,按照上面那份题解,可以不用分这么多类,可以 ...

  8. Email the output of a concurrent program as Attachment

    This article illustrates the steps to be followed to Email a concurrent program's output. Write a pr ...

  9. SecureCRT connecting VM Linux show error message: The remote system refused the connection.

    SecureCRT connecting VM Linux show error message: The remote system refused the connection.

  10. JavaScript基础入门教程（四）

    说明 前面三篇博客介绍了js中基本的知识点,包括变量类型及其转换.表达式.运算符等小知识点,这篇博客主要讲的是对象.如果你学过java等语言,你也许在下文的阅读中发现在js中的对象与java中的对象存 ...