为DOM元素动态添加class，解决addclass（）的覆盖问题
当我们需要对dom元素动态添加⼀个新的样式时，通常会使⽤jquery的addclass()来完成
$('div').addClass('color')
但是这个⽅法有⼀个很⼤的弊端，他会覆盖原来的class，所以使⽤addclass()只能保证新的样式加上去，原来得就没有了;
其次也可以⽤原⽣的js来添加，类似这样：
这种⽅法可以避免覆盖原有的类，但是也存在问题，⼀旦我们要添加的class多的时候，我们需要拼接的字符串就会变得⽐较乱，并且不易维护，我们也⽆法看到哪些使我们已经添加过得class，可能会造成类名添加重复；
为了解决这个问题，下⾯将添加样式类的⽅法进⾏了⼀次封装，也可以直接放在⾃⼰项⽬⾥⾯使⽤，需要的时候直接引⼊就⾏；
// ⾸先判断当前dom是否已经包含了要添加的类
export function hasClass(el, className){
let reg =new RegExp('(^|\\s)'+ className +'(\\s|$)')
st(el.className)
}
// 动态添加class
export function addClass(el, className){
jquery在一个元素后追加标签
if(hasClass(el, className)){
return
}
// 将原有的class按空格拆分，并将类名保存到newclass数组中
let newClass = el.className.split(' ')
// 将要添加的类也push到这个数组
newClass.push(className)
// 将数组拼接成字符串返回给dom
el.className = newClass.join(' ')
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。