工具utils.js

1. 去掉字符串先後空格

function trim(string) {
         return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
        };

二、類名,查找某個指定元素是否包含指定的className

hasClass(el, cls) {
      if (!el || !cls) return fasle;
      if (cls.indexOf(" ") !== -1){
        // throw new Error("要查詢的className不能包含空格!");
        return fasle
      }
        
      if (el.classList) {
        return el.classList.contains(cls);
      } else {
        return (el.className + "").indexOf("" + cls) > -1;
      }
    }

三、增長一個或者多個類名

function addClass(el, cls) {
  if (!el) return;
  var curClass = el.className;
  var classes = (cls || '').split(' ');

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.add(clsName);
    } else if (!hasClass(el, clsName)) {
      curClass += ' ' + clsName;
    }
  }
  if (!el.classList) {
    el.className = curClass;
  }
};

用法工具

addClass(wrapDom, 'dd ee') //添加多個類名

四、移除類名

  1. 能夠移除多個 removeClass(wrapDom, 'dd ee') //添加多個類名
  2. 調用了其餘方法
function removeClass(el, cls) {
  if (!el || !cls) return;
  var classes = cls.split(' ');
  var curClass = ' ' + el.className + ' ';

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.remove(clsName);
    } else if (hasClass(el, clsName)) {
      curClass = curClass.replace(' ' + clsName + ' ', ' ');
    }
  }
  if (!el.classList) {
    el.className = trim(curClass);
  }
};

參考博客

Element分析(工具篇)——Domcode

相關文章
相關標籤/搜索