當我們需要對dom元素動態新增一個新的樣式時，通常會使用jquery的addclass()來完成

$('div').addClass('color')

但是這個方法有一個很大的弊端，他會覆蓋原來的class，所以使用addclass()只能保證新的樣式加上去，原來得就沒有了;
其次也可以用原生的js來新增，類似這樣：

document.getElementsByTagName('body')[0].className = 'snow-container'; //設定為新的
document.getElementsByTagName('body')[0].className +=
 
 'snow-container'; //在原來的後面加這個
document.getElementsByTagName('body')[0].classList.add("snow-container"); //與第一個等價

這種方法可以避免覆蓋原有的類，但是也存在問題，一旦我們要新增的class多的時候，我們需要拼接的字串就會變得比較亂，並且不易維護，我們也無法看到哪些使我們已經新增過得class，可能會造成類名新增重複；
為了解決這個問題，下面將新增樣式類的方法進行了一次封裝，也可以直接放在自己專案裡面使用，需要的時候直接引入就行；

// 首先判斷當前dom是否已經包含了要新增的類
export
 
 function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}
// 動態新增class
export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }
// 將原有的class按空格拆分，並將類名儲存到newclass陣列中
  let newClass = el.className.split(
 
' ')
  // 將要新增的類也push到這個陣列
  newClass.push(className)
  // 將陣列拼接成字串返回給dom
  el.className = newClass.join(' ')
}