资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/原生JavaScript实现hasClass、addClass、removeClass、toggle

原生JavaScript实现hasClass、addClass、removeClass、toggle

brianway / 1524人阅读

摘要：兼容，因不支持和，分别用实现支持。支持明细代码让低版本支持让低版本支持支持实现方式修复不规范传参是否有必要判断不支持实现方式完整代码修复不规范传参支持是否有必要判断使用项目

兼容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会更方便一些，如：

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

GPU云服务器 云服务器 原生js实现addclass 原生javascript javascript原生 原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80098.html

相关文章

  • classList介绍和原生JavaScript实现addClass、removeClass等

    摘要：使用可以给元素很方便的添加和删除等操作，现在原生的也可以实现这个方法了。删除指定的类值。所以目前来看，还是无法在实际中放心的使用，只能用于某些特定的项目等。不过我们可以通过一些来实现，或者最下方给出的原生实现。 使用jQuery可以给元素很方便的添加class和删除class等操作，现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除...

    geekzhou 评论0 收藏0

  • jQuery 源码系列（十八）class 相关操作

    摘要：眼看的源码就快到头了，后面还有几个重要的内容，包括和动画操作，加油把它们看完，百度前端学院的新一批课程也开始了。，当第二个参数为的情况，就是，为时，，从源码来看，就是直接调用的这两个函数。参考源码分析样式操作本文在上的源码地址，欢迎来。 欢迎来我的专栏查看系列文章。 眼看 jQuery 的源码就快到头了，后面还有几个重要的内容，包括 ajax 和动画操作，加油把它们看完，百度前端学院的...

    BingqiChen 评论0 收藏0

  • 那些原生JavaScript

    摘要：最近在用写页面，当然了在移动里引入或这些框架，肯定是极不理性的。原生挺简单，为何需要的成功当时是因为这些浏览器不兼容，让开发者崩溃，而且上浏览器性能好，跨平台兼容也不影响性能。但根本就不是为手机设计的。 最近在用mui写页面，当然了在移动App里引入jq或zepto这些框架，肯定是极不理性的。原生JS挺简单，为何需要jq？jq的成功当时是因为ie6、7、8、9、10、chrome、ff...

    fantix 评论0 收藏0

  • jQuery源码解析之addClass(),removeClass(),toggleClass()和

    摘要：四作用检查目标元素是否包含指定的类源码源码行关键代码这个代码还挺简单的，就不解析了。 showImg(https://segmentfault.com/img/remote/1460000019280925); 一、$().addClass()作用：向目标元素添加一个或多个类名 源码： //向目标元素添加一个或多个类名 //源码8401行 addClass: f...

    Aceyclee 评论0 收藏0

  • js 实现 hasClass(), addClass(), removeClass() 方法

    摘要：实现方法方法有判断是否存在类名，返回值添加类名从列表中删除类名切换类名如果列表中存在则删除，否则添加 js 实现 hasClass(), addClass(), removeClass() 方法 HTML5-classList classList 方法有 contains(className) // 判断是否存在类名，返回Boolean值 add(className) /...

    sydMobile 评论0 收藏0

发表评论

登陆后可评论

0条评论

brianway

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<