原生JavaScript實現(xiàn)hasClass、addClass、removeClass、toggle

brianway 發(fā)布于2019-08-20 10:21 / 1463人閱讀

摘要：兼容，因不支持和，分別用實現(xiàn)支持。支持明細(xì)代碼讓低版本支持讓低版本支持支持實現(xiàn)方式修復(fù)不規(guī)范傳參是否有必要判斷不支持實現(xiàn)方式完整代碼修復(fù)不規(guī)范傳參支持是否有必要判斷使用項目

兼容IE6+，因IE6、IE7、IE8不支持Array.prototype.indexOf()和String.prototype.trim()，分別用Polyfill實現(xiàn)支持。
詳細(xì)：
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

由于現(xiàn)代瀏覽器都基本支持了classList，所以移動端可以直接使用classList會更方便一些，如：


var div = document.getElementById("div");

div.classList.remove("foo");
div.classList.add("anotherclass");
div.classList.toggle("visible");

div.classList.contains("foo");   //

div.classList.add("foo","bar");  //Android4.3不支持

應(yīng)該避免直接使用多個參數(shù)，支持不全面。

SVG 和 MathML 元素支持度也不全面（這個坑下面的代碼并未填上，請熟知，有興趣的可以查下Zepto是怎么填坑的）。
classList支持明細(xì)： http://caniuse.com/#search=classList

代碼 Polyfill

// 讓低版本IE支持 Array.prototype.indexOf
// Polyfill (indexOf @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
  if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(searchElement, fromIndex) {

      var k;
      if (this == null) {
        throw new TypeError(""this" is null or not defined");
      }

      var o = Object(this);
      var len = o.length >>> 0;
      if (len === 0) {
        return -1;
      }

      var n = +fromIndex || 0;
      if (Math.abs(n) === Infinity) {
        n = 0;
      }

      if (n >= len) {
        return -1;
      }

      k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      while (k < len) {
        if (k in o && o[k] === searchElement) {
          return k;
        }
        k++;
      }
      return -1;
    };

  }

  // 讓低版本IE支持 String.prototype.trim()
  // Polyfill (trim @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
  if (!String.prototype.trim) {
    String.prototype.trim = function(){
      return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, "");
    };
  }

支持 classList 實現(xiàn)方式

function ctrlClass(opts) {
    if (!opts.ele || !opts.c) return false;
    // console.log(opts.c)
    var c = null;
    typeof (opts.c) === "string" ? 
    c = opts.c.trim().replace(/s+/g, " ").split(" ") :
    c = opts.c;  //修復(fù)不規(guī)范傳參
    
    return opts.fun({
        ele: opts.ele,
        c: c
    });
    opts.ele = null;
}

/**
 * hasClass
 * @param (element, "c1 c2 c3 c4 c5")
 */
 function hasClass(ele, c) {
    return ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
            return opts.c.every(function(v) {
                return !!opts.ele.classList.contains(v);
            });
        }
     });
 }

 /**
 * addClass
 * @param (element, "c1 c2 c3 c4 c5")
 */
 function addClass(ele, c) {
    return ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
            var ele = opts.ele,
                c = opts.c;
            c.forEach(function(v) {
                if (!hasClass(ele, v)) {
                    ele.classList.add(v);
                }
            });
        }
    })
 }

 /**
  * removeClass
  * @param (element, "c1 c2 c3")
 */
 function removeClass(ele, c) {
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c;
      c.forEach(function(v) {
        // TODO 是否有必要判斷 hasClass
        // if (!hasClass(ele, v)) {
          ele.classList.remove(v);
        // }
      });
    }
  });
 }

 /**
  * toggleClass
  * @param (element, "c1 c2 c3")
 */
 function toggleClass(ele, c) {
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c;
      c.forEach(function(v) {
        ele.classList.toggle(v);
      })
    }
  })
 }

不支持 classList 實現(xiàn)方式

/**
 * hasClass
 * @param (element, "c1 c2 c3 c4 c5")
 */
 function hasClass(ele, c) {
    return ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
            var cln = opts.ele.className.split(" ");
            var c = opts.c;
            for (var i = 0; i < c.length; i++) {
                if(cln.indexOf(c[i]) !== -1){
                    return true;
                }
            }
            return false;
        }
     });
 }


 /**
  * addClass
  * @param (element, "c1 c2 c3")
 */
 function addClass(ele, c) {
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c;
      for (var i = 0; i < c.length; i++) {
        if(!hasClass(ele, c[i])) {
          ele.className = ele.className !== "" ? (ele.className + " " + c[i]) : c[i];
        }
      }  
    }
  });
 }


 /**
  * removeClass
  * @param (element, "c1 c2 c3")
 */
 function removeClass(ele, c) {
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c,
          cln = ele.className.split(" ");
      for (var i = 0; i < c.length; i++) {
        if (hasClass(ele, c[i])) {
          cln.splice(cln.indexOf(c[i]), 1);
        }
      }
      ele.className = cln.join(" ");
    }
  });
 }

 /**
  * toggleClass
  * @param (element, "c1 c2 c3")
 */
 function toggleClass(ele, c){
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c;
      for (var i = 0; i < c.length; i++) {
        !!hasClass(ele, c[i]) ? removeClass(ele, c[i]) : addClass(ele, c[i]);  
      }
    }
  });
 }

完整代碼

// Polyfill (indexOf @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
  if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {

  var k;
  if (this == null) {
    throw new TypeError(""this" is null or not defined");
  }

  var o = Object(this);
  var len = o.length >>> 0;
  if (len === 0) {
    return -1;
  }

  var n = +fromIndex || 0;
  if (Math.abs(n) === Infinity) {
    n = 0;
  }

  if (n >= len) {
    return -1;
  }

  k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

  while (k < len) {
    if (k in o && o[k] === searchElement) {
      return k;
    }
    k++;
  }
  return -1;
};

  }

  // Polyfill (trim @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
  if (!String.prototype.trim) {
    String.prototype.trim = function(){
      return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, "");
    };
  }

var cl = ("classList" in document.createElement("a"));

function ctrlClass(opts) {
    if (!opts.ele || !opts.c) return false;
    // console.log(opts.c)
    var c = null;
    typeof (opts.c) === "string" ? 
    c = opts.c.trim().replace(/s+/g, " ").split(" ") :
    c = opts.c;  //修復(fù)不規(guī)范傳參
    
    return opts.fun({
        ele: opts.ele,
        c: c
    });
    opts.ele = null;
}   

// 支持 classList
if(cl){
    /**
     * hasClass
     * @param (element, "c1 c2 c3 c4 c5")
     */
     function hasClass(ele, c) {
        return ctrlClass({
            ele: ele,
            c: c,
            fun: function(opts) {
                return opts.c.every(function(v) {
                    return !!opts.ele.classList.contains(v);
                });
            }
         });
     }

     /**
     * addClass
     * @param (element, "c1 c2 c3 c4 c5")
     */
     function addClass(ele, c) {
        return ctrlClass({
            ele: ele,
            c: c,
            fun: function(opts) {
                var ele = opts.ele,
                    c = opts.c;
                c.forEach(function(v) {
                    if (!hasClass(ele, v)) {
                        ele.classList.add(v);
                    }
                });
            }
        })
     }

     /**
      * removeClass
      * @param (element, "c1 c2 c3")
     */
     function removeClass(ele, c) {
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c;
          c.forEach(function(v) {
            // TODO 是否有必要判斷 hasClass
            // if (!hasClass(ele, v)) {
              ele.classList.remove(v);
            // }
          });
        }
      });
     }

     /**
      * toggleClass
      * @param (element, "c1 c2 c3")
     */
     function toggleClass(ele, c) {
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c;
          c.forEach(function(v) {
            ele.classList.toggle(v);
          })
        }
      })
     }

}else{
    /**
     * hasClass
     * @param (element, "c1 c2 c3 c4 c5")
     */
     function hasClass(ele, c) {
        return ctrlClass({
            ele: ele,
            c: c,
            fun: function(opts) {
                var cln = opts.ele.className.split(" ");
                var c = opts.c;
                for (var i = 0; i < c.length; i++) {
                    if(cln.indexOf(c[i]) !== -1){
                        return true;
                    }
                }
                return false;
            }
         });
     }

     /**
      * addClass
      * @param (element, "c1 c2 c3")
     */
     function addClass(ele, c) {
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c;
          for (var i = 0; i < c.length; i++) {
            if(!hasClass(ele, c[i])) {
              ele.className = ele.className !== "" ? (ele.className + " " + c[i]) : c[i];
            }
          }  
        }
      });
     }

     /**
      * removeClass
      * @param (element, "c1 c2 c3")
     */
     function removeClass(ele, c) {
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c,
              cln = ele.className.split(" ");
          for (var i = 0; i < c.length; i++) {
            if (hasClass(ele, c[i])) {
              cln.splice(cln.indexOf(c[i]), 1);
            }
          }
          ele.className = cln.join(" ");
        }
      });
     }

     /**
      * toggleClass
      * @param (element, "c1 c2 c3")
     */
     function toggleClass(ele, c){
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c;
          for (var i = 0; i < c.length; i++) {
            !!hasClass(ele, c[i]) ? removeClass(ele, c[i]) : addClass(ele, c[i]);  
          }
        }
      });
     }
}

使用

var ele = document.getElementById("test");
hasClass(ele, "c1");
addClass(ele, "c1 c2 c3");
removeClass(ele, "c1 c2 c3");
toggleClass(ele, "c1 c2 c3");

項目

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

云服務(wù)器 GPU云服務(wù)器原生js實現(xiàn)addclass 原生javascript javascript原生原生js實現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80098.html

發(fā)表評論

登陸后可評論

0條評論

brianway

男|高級講師

我要關(guān)注我要私信

TA的文章

原生態(tài)Linux桌面系統(tǒng)Ubuntu 20.10桌面版本ISO鏡像體驗

閱讀 2614·2021-09-26 10:17
云主機(jī)上怎么建數(shù)據(jù)庫-云主機(jī)跟云數(shù)據(jù)庫的區(qū)別？

閱讀 3239·2021-09-22 15:16
TUDCLOUD：促銷兩款特價香港直連VPS，限量50臺售完即止，$35/年/1核512M內(nèi)存/5G

閱讀 2148·2021-09-03 10:43
JavaScript是否阻塞解析

閱讀 3273·2019-08-30 11:23
web開發(fā)常用的幾種居中形式

閱讀 3671·2019-08-29 13:23
margin

閱讀 1317·2019-08-29 11:31
react 父組件調(diào)用子組件dom

閱讀 3699·2019-08-26 13:52
閉包--閉包之tab欄切換(四)

閱讀 1408·2019-08-26 12:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

原生JavaScript實現(xiàn)hasClass、addClass、removeClass、toggle

相關(guān)文章

**classList介紹和原生JavaScript實現(xiàn)addClass、removeClass等**

jQuery 源碼系列（十八）class 相關(guān)操作

那些原生JavaScript

**jQuery源碼解析之addClass(),removeClass(),toggleClass()和**

**js 實現(xiàn) hasClass(), addClass(), removeClass() 方法**

發(fā)表評論

0條評論

brianway

男|高級講師

TA的文章

原生態(tài)Linux桌面系統(tǒng)Ubuntu 20.10桌面版本ISO鏡像體驗

云主機(jī)上怎么建數(shù)據(jù)庫-云主機(jī)跟云數(shù)據(jù)庫的區(qū)別？

TUDCLOUD：促銷兩款特價香港直連VPS，限量50臺售完即止，$35/年/1核512M內(nèi)存/5G

JavaScript是否阻塞解析

web開發(fā)常用的幾種居中形式

margin

react 父組件調(diào)用子組件dom

閉包--閉包之tab欄切換(四)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

原生JavaScript實現(xiàn)hasClass、addClass、removeClass、toggle

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

原生JavaScript實現(xiàn)hasClass、addClass、removeClass、toggle