常用工具类JS之手动添加"class"标签样
2018-08-07 本文已影响0人
fred_33c7
在写代码的过程中,怎么样手动添加一个样式呢?
我们知道,在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.children
for (let i = 0; i < this.children.length; i++) {
let child = this.children[i]
addClass(child, 'item')
}
这样的话,就能给元素添加样式标签了,当然,前提是item标签已经在当前css文件里面存在。