原生JavaScript操作CSS類名className——hasClass,addClass,removeClass

驗證當前元素是否包含className這個類名

function hasClass(curEle, className) {
  var reg = new RegExp("(^| +)" + className + "( +|$)");
  return reg.test(curEle.className);
}

給元素新增樣式類名

function addClass(curEle, className) {
  var arr = className.replace(/(^ +| +$)/g
 
, "").split(/ +/g); // 先去首尾空格，為了防止className為多個類名 "box1 box2"
  for (var i = 0,len=className.length; i < len; i++) {
    var curName = arr[i];
    if (!hasClass(curEle, className)) {
      curEle.className += " " + curName;
    }
  }
}

移除類名

function removeClass(curEle, className) {
  var arr = className.replace(/(^ +| +$)/g
 
, "").split(/ +/g);
  for (var i = 0, len = className.length; i < len; i++) {
    var curName = arr[i];
    if (hasClass(curEle, curName)) {
      var reg = new RegExp("(^| +)" + curName + "( +|$)", "g");
      curEle.className = curEle.className.replace(reg, " ");
    }
  }
}