常用工具类JS之手动添加"class"标签样式

在写代码的过程中，怎么样手动添加一个样式呢?
我们知道，在VUE中，通过 ref很容易得到一个样式的dom

<div class="group" ref="group">
      <slot>
      </slot></div>

在这个template中，我们通过this.children = this.$refs.group.children就很容易或者<div class="group">这个元素的子元素，但是，如果我们想给这些子元素手动添加一个css样式，那怎么样写一个方法呢？比如addClass(child, item')
其实很容易，通常在一个项目中，我们都会建立一个common文件夹保存一些工具类的js文件，我们可以新建一个dom.js，来保存下面的代码。

export function hasClass(el, className) {  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')  return reg.test(el.className)
}export function addClass(el, className) {  if (hasClass(el, className)) {    return
  }  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}

这个文件很容易看懂，用正则表达式检查这个元素有没有这个class，有的话直接返回，没有的话加上。
例如：

this.children = this.$refs.group.childrenfor (let i = 0; i < this.children.length; i++) {      let child = this.children[i]
      addClass(child, 'item')
}

这样的话，就能给元素添加样式标签了，当然，前提是item标签已经在当前css文件里面存在。

作者：fred_33c7
链接：https://www.jianshu.com/p/68088913477c