类名操作 className & classList

类名操作

在前端中，我们常常需要进行类名操作，大致有以下4种

• Has(el, class)
  检查el的类中是否包含class类名
• Add(el, class)
  向el类中添加class类名
• Remove(el, class)
  从el类中移除class类名
• Toggle(el, class)
  如果el中包含class，就移除它，反之，添加它

类名操作的意义

通过类名操作，我们可以改变元素的类名，进而改变元素的行为和渲染方式。

类名操作的例子

编写一个modal插件时，.open类的css样式中包含opacity: 1属性，而.close中包含opacity:0。我们可以通过增添或者移除(toggle)div.modal元素的open和close类名，来控制div.modal元素的可见性。
增减类名同样可以触发transition事件，编写.close和.open中的transition属性可以达到定制动画效果。

类名操作相关的webAPI

classList

API

• add
• remove
• item
• toggle
• contains

classList包含了完整的类名操作函数，但不一定兼容所有浏览器。

className

API

返回class属性的值

使用正则表达式编写完整API

inspired by bonzo
首先定义寻找类-正则表达式

var classReg = function(className){
  return new RegExp("(^|\\s+)"+className+"(\\s+|$)");
}

• has

var has = function(element, className) {
  return classReg(className).test(element.className)；
}

• add

var add = function(element, className){
    if( !has(element, className) ) {
      element.className += ' '+className;
    }
}

• remove

var remove = function(element, className) {
    element.className = element.className.replace(classReg(className), ' ');
}

• toggle

var toggle = function(element, className) {
    var fn = has(element,className)?remove:add;
    fn(element, className);
}

通过库或者自行实现API，我们可以使用className来进行类名操作。