兼容IE6+，因IE6、IE7、IE8不支持Array.prototype.indexOf()和String.prototype.trim()，分别用Polyfill实现支持。

详细：

indexOf https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

trim： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

由于现代浏览器都基本支持了classList，所以移动端可以直接使用classList会更方便一些，如：

  1. <div class="foo bar" id="div"></div>
  2. var div = document.getElementById('div');
  4. div.classList.remove("foo");
  5. div.classList.add("anotherclass");
  6. div.classList.toggle("visible");
  8. div.classList.contains("foo");   //
  10. div.classList.add("foo","bar");  //Android4.3不支持
  1. 应该避免直接使用多个参数，支持不全面。
  2. SVG 和 MathML 元素支持度也不全面（这个坑下面的代码并未填上，请熟知，有兴趣的可以查下Zepto是怎么填坑的）。

    classList支持明细： http://caniuse.com/#search=classList

代码

Polyfill

  1. // 让低版本IE支持 Array.prototype.indexOf
  2. // Polyfill (indexOf @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
  3.   if (!Array.prototype.indexOf) {
  4.     Array.prototype.indexOf = function(searchElement, fromIndex) {
  6.       var k;
  7.       if (this == null) {
  8.         throw new TypeError('"this" is null or not defined');
  9.       }
  11.       var o = Object(this);
  12.       var len = o.length >>> 0;
  13.       if (len === 0) {
  14.         return -1;
  15.       }
  17.       var n = +fromIndex || 0;
  18.       if (Math.abs(n) === Infinity) {
  19.         n = 0;
  20.       }
  22.       if (n >= len) {
  23.         return -1;
  24.       }
  26.       k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
  28.       while (k < len) {
  29.         if (k in o && o[k] === searchElement) {
  30.           return k;
  31.         }
  32.         k++;
  33.       }
  34.       return -1;
  35.     };
  37.   }
  39.   // 让低版本IE支持 String.prototype.trim()
  40.   // Polyfill (trim @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
  41.   if (!String.prototype.trim) {
  42.     String.prototype.trim = function(){
  43.       return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  44.     };
  45.   }

支持 classList 实现方式

  1. function ctrlClass(opts) {
  2.     if (!opts.ele || !opts.c) return false;
  3.     // console.log(opts.c)
  4.     var c = null;
  5.     typeof (opts.c) === 'string' ?
  6.     c = opts.c.trim().replace(/\s+/g, ' ').split(' ') :
  7.     c = opts.c;  //修复不规范传参
  9.     return opts.fun({
  10.         ele: opts.ele,
  11.         c: c
  12.     });
  13.     opts.ele = null;
  14. }
  16. /**
  17.  * hasClass
  18.  * @param (element, 'c1 c2 c3 c4 c5')
  19.  */
  20.  function hasClass(ele, c) {
  21.     return ctrlClass({
  22.         ele: ele,
  23.         c: c,
  24.         fun: function(opts) {
  25.             return opts.c.every(function(v) {
  26.                 return !!opts.ele.classList.contains(v);
  27.             });
  28.         }
  29.      });
  30.  }
  32.  /**
  33.  * addClass
  34.  * @param (element, 'c1 c2 c3 c4 c5')
  35.  */
  36.  function addClass(ele, c) {
  37.     return ctrlClass({
  38.         ele: ele,
  39.         c: c,
  40.         fun: function(opts) {
  41.             var ele = opts.ele,
  42.                 c = opts.c;
  43.             c.forEach(function(v) {
  44.                 if (!hasClass(ele, v)) {
  45.                     ele.classList.add(v);
  46.                 }
  47.             });
  48.         }
  49.     })
  50.  }
  52.  /**
  53.   * removeClass
  54.   * @param (element, 'c1 c2 c3')
  55.  */
  56.  function removeClass(ele, c) {
  57.   ctrlClass({
  58.     ele: ele,
  59.     c: c,
  60.     fun: function(opts) {
  61.       var ele = opts.ele,
  62.           c = opts.c;
  63.       c.forEach(function(v) {
  64.         // TODO 是否有必要判断 hasClass
  65.         // if (!hasClass(ele, v)) {
  66.           ele.classList.remove(v);
  67.         // }
  68.       });
  69.     }
  70.   });
  71.  }
  73.  /**
  74.   * toggleClass
  75.   * @param (element, 'c1 c2 c3')
  76.  */
  77.  function toggleClass(ele, c) {
  78.   ctrlClass({
  79.     ele: ele,
  80.     c: c,
  81.     fun: function(opts) {
  82.       var ele = opts.ele,
  83.           c = opts.c;
  84.       c.forEach(function(v) {
  85.         ele.classList.toggle(v);
  86.       })
  87.     }
  88.   })
  89.  }

不支持 classList 实现方式

  1. /**
  2.  * hasClass
  3.  * @param (element, 'c1 c2 c3 c4 c5')
  4.  */
  5.  function hasClass(ele, c) {
  6.     return ctrlClass({
  7.         ele: ele,
  8.         c: c,
  9.         fun: function(opts) {
  10.             var cln = opts.ele.className.split(' ');
  11.             var c = opts.c;
  12.             for (var i = 0; i < c.length; i++) {
  13.                 if(cln.indexOf(c[i]) !== -1){
  14.                     return true;
  15.                 }
  16.             }
  17.             return false;
  18.         }
  19.      });
  20.  }
  22.  /**
  23.   * addClass
  24.   * @param (element, 'c1 c2 c3')
  25.  */
  26.  function addClass(ele, c) {
  27.   ctrlClass({
  28.     ele: ele,
  29.     c: c,
  30.     fun: function(opts) {
  31.       var ele = opts.ele,
  32.           c = opts.c;
  33.       for (var i = 0; i < c.length; i++) {
  34.         if(!hasClass(ele, c[i])) {
  35.           ele.className = ele.className !== '' ? (ele.className + ' ' + c[i]) : c[i];
  36.         }
  37.       }
  38.     }
  39.   });
  40.  }
  42.  /**
  43.   * removeClass
  44.   * @param (element, 'c1 c2 c3')
  45.  */
  46.  function removeClass(ele, c) {
  47.   ctrlClass({
  48.     ele: ele,
  49.     c: c,
  50.     fun: function(opts) {
  51.       var ele = opts.ele,
  52.           c = opts.c,
  53.           cln = ele.className.split(' ');
  54.       for (var i = 0; i < c.length; i++) {
  55.         if (hasClass(ele, c[i])) {
  56.           cln.splice(cln.indexOf(c[i]), 1);
  57.         }
  58.       }
  59.       ele.className = cln.join(' ');
  60.     }
  61.   });
  62.  }
  64.  /**
  65.   * toggleClass
  66.   * @param (element, 'c1 c2 c3')
  67.  */
  68.  function toggleClass(ele, c){
  69.   ctrlClass({
  70.     ele: ele,
  71.     c: c,
  72.     fun: function(opts) {
  73.       var ele = opts.ele,
  74.           c = opts.c;
  75.       for (var i = 0; i < c.length; i++) {
  76.         !!hasClass(ele, c[i]) ? removeClass(ele, c[i]) : addClass(ele, c[i]);
  77.       }
  78.     }
  79.   });
  80.  }

完整代码

  1. // Polyfill (indexOf @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
  2. if (!Array.prototype.indexOf) {
  3. Array.prototype.indexOf = function(searchElement, fromIndex) {
  5.   var k;
  6.   if (this == null) {
  7.     throw new TypeError('"this" is null or not defined');
  8.   }
  10.   var o = Object(this);
  11.   var len = o.length >>> 0;
  12.   if (len === 0) {
  13.     return -1;
  14.   }
  16.   var n = +fromIndex || 0;
  17.   if (Math.abs(n) === Infinity) {
  18.     n = 0;
  19.   }
  21.   if (n >= len) {
  22.     return -1;
  23.   }
  25.   k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
  27.   while (k < len) {
  28.     if (k in o && o[k] === searchElement) {
  29.       return k;
  30.     }
  31.     k++;
  32.   }
  33.   return -1;
  34. };
  36. }
  38.   // Polyfill (trim @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
  39.   if (!String.prototype.trim) {
  40.     String.prototype.trim = function(){
  41.       return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
  42.     };
  43.   }
  45. var cl = ('classList' in document.createElement('a'));
  47. function ctrlClass(opts) {
  48.     if (!opts.ele || !opts.c) return false;
  49.     // console.log(opts.c)
  50.     var c = null;
  51.     typeof (opts.c) === 'string' ?
  52.     c = opts.c.trim().replace(/\s+/g, ' ').split(' ') :
  53.     c = opts.c;  //修复不规范传参
  55.     return opts.fun({
  56.         ele: opts.ele,
  57.         c: c
  58.     });
  59.     opts.ele = null;
  60. }   
  62. // 支持 classList
  63. if(cl){
  64.     /**
  65.      * hasClass
  66.      * @param (element, 'c1 c2 c3 c4 c5')
  67.      */
  68.      function hasClass(ele, c) {
  69.         return ctrlClass({
  70.             ele: ele,
  71.             c: c,
  72.             fun: function(opts) {
  73.                 return opts.c.every(function(v) {
  74.                     return !!opts.ele.classList.contains(v);
  75.                 });
  76.             }
  77.          });
  78.      }
  80.      /**
  81.      * addClass
  82.      * @param (element, 'c1 c2 c3 c4 c5')
  83.      */
  84.      function addClass(ele, c) {
  85.         return ctrlClass({
  86.             ele: ele,
  87.             c: c,
  88.             fun: function(opts) {
  89.                 var ele = opts.ele,
  90.                     c = opts.c;
  91.                 c.forEach(function(v) {
  92.                     if (!hasClass(ele, v)) {
  93.                         ele.classList.add(v);
  94.                     }
  95.                 });
  96.             }
  97.         })
  98.      }
  100.      /**
  101.       * removeClass
  102.       * @param (element, 'c1 c2 c3')
  103.      */
  104.      function removeClass(ele, c) {
  105.       ctrlClass({
  106.         ele: ele,
  107.         c: c,
  108.         fun: function(opts) {
  109.           var ele = opts.ele,
  110.               c = opts.c;
  111.           c.forEach(function(v) {
  112.             // TODO 是否有必要判断 hasClass
  113.             // if (!hasClass(ele, v)) {
  114.               ele.classList.remove(v);
  115.             // }
  116.           });
  117.         }
  118.       });
  119.      }
  121.      /**
  122.       * toggleClass
  123.       * @param (element, 'c1 c2 c3')
  124.      */
  125.      function toggleClass(ele, c) {
  126.       ctrlClass({
  127.         ele: ele,
  128.         c: c,
  129.         fun: function(opts) {
  130.           var ele = opts.ele,
  131.               c = opts.c;
  132.           c.forEach(function(v) {
  133.             ele.classList.toggle(v);
  134.           })
  135.         }
  136.       })
  137.      }
  139. }else{
  140.     /**
  141.      * hasClass
  142.      * @param (element, 'c1 c2 c3 c4 c5')
  143.      */
  144.      function hasClass(ele, c) {
  145.         return ctrlClass({
  146.             ele: ele,
  147.             c: c,
  148.             fun: function(opts) {
  149.                 var cln = opts.ele.className.split(' ');
  150.                 var c = opts.c;
  151.                 for (var i = 0; i < c.length; i++) {
  152.                     if(cln.indexOf(c[i]) !== -1){
  153.                         return true;
  154.                     }
  155.                 }
  156.                 return false;
  157.             }
  158.          });
  159.      }
  161.      /**
  162.       * addClass
  163.       * @param (element, 'c1 c2 c3')
  164.      */
  165.      function addClass(ele, c) {
  166.       ctrlClass({
  167.         ele: ele,
  168.         c: c,
  169.         fun: function(opts) {
  170.           var ele = opts.ele,
  171.               c = opts.c;
  172.           for (var i = 0; i < c.length; i++) {
  173.             if(!hasClass(ele, c[i])) {
  174.               ele.className = ele.className !== '' ? (ele.className + ' ' + c[i]) : c[i];
  175.             }
  176.           }
  177.         }
  178.       });
  179.      }
  181.      /**
  182.       * removeClass
  183.       * @param (element, 'c1 c2 c3')
  184.      */
  185.      function removeClass(ele, c) {
  186.       ctrlClass({
  187.         ele: ele,
  188.         c: c,
  189.         fun: function(opts) {
  190.           var ele = opts.ele,
  191.               c = opts.c,
  192.               cln = ele.className.split(' ');
  193.           for (var i = 0; i < c.length; i++) {
  194.             if (hasClass(ele, c[i])) {
  195.               cln.splice(cln.indexOf(c[i]), 1);
  196.             }
  197.           }
  198.           ele.className = cln.join(' ');
  199.         }
  200.       });
  201.      }
  203.      /**
  204.       * toggleClass
  205.       * @param (element, 'c1 c2 c3')
  206.      */
  207.      function toggleClass(ele, c){
  208.       ctrlClass({
  209.         ele: ele,
  210.         c: c,
  211.         fun: function(opts) {
  212.           var ele = opts.ele,
  213.               c = opts.c;
  214.           for (var i = 0; i < c.length; i++) {
  215.             !!hasClass(ele, c[i]) ? removeClass(ele, c[i]) : addClass(ele, c[i]);
  216.           }
  217.         }
  218.       });
  219.      }
  220. }

使用

  1. var ele = document.getElementById('test');
  2. hasClass(ele, 'c1');
  3. addClass(ele, 'c1 c2 c3');
  4. removeClass(ele, 'c1 c2 c3');
  5. toggleClass(ele, 'c1 c2 c3');

项目

https://github.com/givebest/ctrl-cssClass

原生JavaScript实现hasClass、addClass、removeClass、toggleClass的更多相关文章

  1. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  3. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

  4. 原声js实现addClass removeClass toggleClass效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]

    1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...

  6. addClass, removeClass, toggleClass（从jquery中抠出来）

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  7. class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  8. class 添加样式,删除，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  9. .addClass(),.removeClass(),.toggleClass()的区别

    .addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...

随机推荐

  1. Laravel Composer and ServiceProvider

    Composer and: 创建自定义类库时,按命名空间把文件夹结构组织好 composer.json>autoload>classmap>psr-4 composer dump-a ...

  2. 【原】AFNetworking源码阅读（三）

    [原]AFNetworking源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇的话,主要是讲了如何通过构建一个request来生成一个data tas ...

  3. 6. ModelDriven拦截器、Preparable 拦截器

    1. 问题 Struts2 的 Action 我们将它定义为一个控制器,但是由于在 Action 中也可以来编写一些业务逻辑,也有人会在 Action 输入业务逻辑层. 但是在企业开发中,我们一般会将 ...

  4. C#多线程之基础篇3

    在上一篇C#多线程之基础篇2中,我们主要讲述了确定线程的状态.线程优先级.前台线程和后台线程以及向线程传递参数的知识,在这一篇中我们将讲述如何使用C#的lock关键字锁定线程.使用Monitor锁定线 ...

  5. Shell碎碎念

    1. 字符串如何大小写转换 str="This is a Bash Shell script." 1> tr方式 newstr=`tr '[A-Z]' '[a-z]' < ...

  6. Linux杀死进程，查看进程

    http://blog.csdn.net/wojiaopanpan/article/details/7286430/

  7. UML图中经常用到几种的关系图例

    学习这个东西挺奇怪的,时间一长就容易忘记,或者记不清楚.今天看到一些UML图的关系,发现有些出入了,索性就写下来,以后再忘记的时候过来看看. 在UML的类图中,常见的有以下几种关系: 继承(Gener ...

  8. RabbitMQ + PHP （二）AMQP拓展安装

    上篇说到了 RabbitMQ 的安装. 这次要在讲案例之前,需要安装PHP的AMQP扩展.不然可能会报以下两个错误. 1.Fatal error: Class 'AMQPConnection' not ...

  9. webpack学习总结

    前言 在还未接触webpack,就有几个疑问: 1. webpack本质上是什么? 2. 跟异步模块加载有关系吗? 3. 可否生成多个文件,一定是一个? 4. 被引用的文件有其他异步加载模块怎么办? ...

  10. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...