classList 操作方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var CL = {
       addClass: function(ele, cls) {
         ele.classList.add(cls);
       },

       removeClass: function(ele, cls) {
         ele.classList.remove(cls);
       },

       hasClass: function(ele, cls) {
         return ele.classList.contains(cls);
       },

       toggleClass: function(ele, cls) {
         return ele.classList.toggle(cls);
       }
     };

class自定义操作方法

ele.className.replace(/\s+/," ").split(" ");
用正则表达式来去除类名之间的任意个空格，并且用一个空格替换，相当于统一格式，然后用split方法以空格来分隔类名转化成数组。

hasClass方法在获取到元素的className的前后都加了空格，并且对要查找的类名前后也加了空格，是为了确保开头的类名和末尾的类名都能被查找到。
indexOf方法查找字符串的位置，查找不到返回-1。

addClass方法注意要在添加的类名前插入一个空格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var CC = {
  getClass: function(ele) {
    return ele.className.replace(/\s+/, " ").split(" ");
  },

  hasClass: function(ele, cls) {
    return -1 < (" " + ele.className + " ").indexOf(" " + cls + " ");
  },

  addClass: function(ele, cls) {
    if (!this.hasClass(ele, cls))
      ele.className += " " + cls;
  },

  removeClass: function(ele, cls) {
    if (this.hasClass(ele, cls)) {
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)', "gi");
      ele.className = ele.className.replace(reg, " ");
    }
  },

  toggleClass: function(ele, cls) {
    if (this.hasClass(ele, cls)) {
      this.removeClass(ele, cls);
    } else {
      this.addClass(ele, cls);
    }
  }
};