添加类名
element.classList.add(class1, class2, ...);
兼容IE8的写法
function addClass(el, className) {
var oldClassStr = '';
//先判断元素中是否有class属性
if(ele.getAttribute('class')){
//获取原有的类名
oldClassStr = el.getAttribute('class');
//把原来的类名分割后添加入数组,判断要添加的类名是否已存在
var oldClassArr = oldClassStr.split(' ');
如果!=-1,说明存在或同名,不添加直接return
if(oldClassArr.indexOf(className)!=-1){
console.log(className+"已经存在或同名");
return;
}else{
//添加空格
oldClassStr+=' ';
}
}
//添加新类名
oldClassStr += className;
el.setAttribute('class',oldClassStr);
}
调用,若添加多个类名,要用空格格开
addClass(el,"className1 className2");
删除类名
element.classList.remove(class1, class2, ...);
兼容IE8的写法
function delClass(el,className){
//先判断元素是否有 class 属性
if(!el.getAttribute('class')){
return;
}
//获取原有的类名
var oldClassStr = el.getAttribute('class');
//把原来的类名分割后添加入数组,判断要添加的类名是否已存在
var oldClassArr = oldClassStr.split(' ');
//获取要删除了类名的下标
var index = oldClassArr.indexOf(className);
//如果!=-1,说明存在,才可以执行删除
if(index!=-1){
oldClassArr.splice(index,1);
}
//把删除后的数组转为字符串
oldClassStr = oldClassArr.join(' ');
el.setAttribute('class',oldClassStr);
}
调用,若删除多个类名,要用空格格开
delClass(el,"className1 className2");