類名操作

在前端中，我們常常需要進行類名操作，大致有以下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元素的可見性。
增減類名同樣可以觸發(fā)transition事件，編寫.close和.open中的transition屬性可以達到定制動畫效果。

類名操作相關(guān)的webAPI

classList

API

• add
• remove
• item
• toggle
• contains

classList包含了完整的類名操作函數(shù)，但不一定兼容所有瀏覽器。

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);
}

通過庫或者自行實現(xiàn)API，我們可以使用className來進行類名操作。