如何實作 addClass, removeClass？

以下原始碼與想法，參考自 Sitepoint：Add or Remove a CSS Class with Vanilla JavaScript 並作改寫，為了撰寫方便，使用 ES6 語法，如需支援古老瀏覽器，仍需經過 Babel 轉換。

如果不使用 jQuery，只想用 Vanilla Javascript 來新增移除Class，我們可以利用className（IE8+）或classList（IE10+）來實作。

IE8+

addClass

const addClass = (el, myClass) => {
  //檢查element是否存在
  if (!el) {
    return;
  }
  
  //取得所有element(s)
  if (typeof(el) === 'string') {
    el = document.querySelectorAll(el);
  } else if (el.tagName) {
    el = [el];
  }

  for (let i = el.length - 1; i >= 0; i--) {
    //檢查欲新增的class是否已經存在
    //注意前後的space，這樣可以避免使用RegExp
    if ((` ${el[i].className} `).indexOf(` ${myClass} `) < 0) { 
      el[i].className += ` ${myClass}`;//key code
    }
  }
}

removeClass

const removeClass = (el, myClass) => {
  //檢查element是否存在
  if (!el) {
    return;
  }

  //取得所有element(s)
  if (typeof(el) === 'string') {
    el = document.querySelectorAll(el);
  } else if (el.tagName) {
    el = [el];
  }

  //利用RegExp找到此class
  let reg = new RegExp(`(^| )${myClass}($| )`, 'g')

  for (let i = el.length - 1; i >= 0; i--) {
    el[i].className = el[i].className.replace(reg, ' ');//key code
  }
}

IE10+

addClass

const addClass = (selector, myClass) => {
  //取得所有element(s)
  el = document.querySelectorAll(selector);

  for (let i = el.length - 1; i >= 0; i--) {
    el[i].classList.add(myClass);//key code
  }
}

removeClass

const removeClass = (selector, myClass) => {
  //取得所有element(s)
  el = document.querySelectorAll(selector);

  for (let i = el.length - 1; i >= 0; i--) {
    el[i].classList.remove(myClass);//key code
  }
}