使用原生js通过改变元素节点类名的方式实现切换不同的css样式。

Question

问题在于：尝试多种方法，只有一种可以达到效果，但不是我想要的只通过类名改变css样式，为什么前几种方法失败？可以直接看js代码最后一部分，为了不影响判断，把全部代码贴上。js代码如下：varaqiData=[["北京",90],["上海",50],["福州",10],["广州",50],["成都",90],["西安",100]];//第一步：数组排序functionsortWay(a,b){vara=a[1];varb=b[1];returna-b;}aqiData.sort(sortWay);//第二步：删除aqiDate>60的数据//方法1：for循环/*for(vari=0;i60){aqiData.splice(i,1);i--;}}console.log(aqiData);*///方法2：forEach/*aqiData.forEach(function(aqi){if(aqi[1]>60){aqi[1].aplice;}});console.log();*///方法3：filterfunctionisenoughsmall(value){returnvalue[1]

Answer 1

一开始改变元素的style属性，后来想通过添加class改变，你这种写法肯定是不可以的，行内样式权重高于类的，行内样式会覆盖类上面的样式。
三种方法：
设置class里面的样式!important。
一开始移入的时候就通过加class的方式改变
之后通过改变style的形式。
按你的意思肯定是想要第二种，两个简单的hasClass和addClass方法。
//判断类是否在该元素中存在
funtionhasClass(elm,cls){
varreg=newRegExp('(^|\\s)'+className+'(\\s|$)')
returnreg.test(element.className)
}
//添加类
functionaddClass(elm,cls){
if(hasClass(elm,cls)){
return;
}
varnewClass=elm.className.split('');
newClass.push(cls);
element.className=newClass.join('');
}