使用原生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;iif(aqiData[i][1]>60){
aqiData.splice(i,1);
i--;
}
}
console.log(aqiData);
*/
//方法2：forEach
/*aqiData.forEach(function(aqi){
if(aqi[1]>60){
aqi[1].aplice;
}
});
console.log();*/
//方法3：filter
functionisenoughsmall(value){
returnvalue[1]<=60;
}
varnewaqi=aqiData.filter(isenoughsmall);
//console.log(newaqi);
//第三步：拆分数组，组合输出语句
//第四步：输出对应数据到页面指定位置
for(varj=0;j//拆分组合输出的li语句
varaqitext="第"+parseInt(j+1)+"名："+newaqi[j][0]+","+newaqi[j][1];
//获取父元素节点
varul=document.getElementById("aqi-list");
varli=document.createElement("li");
vartext=document.createTextNode(aqitext);
//给新创建的li标签添加文本节点
li.appendChild(text);
//给指定的父元素添加新创建的li标签，实现网页出现数据
ul.appendChild(li);
//diy练习
//鼠标事件，悬移ok；
li.onmouseover=function(){
this.setAttribute("style","background:black;color:green;border:1pxsolidwhite");
}
*//鼠标事件，通过更改li类名来达到移开样式恢复的效果失败！！！！！原因未知？
li.onmouseout=function(){
//this.setAttribute("class","listyle");更改属性也不行
//this.className="listyle";不成功
//document.li.classList.add("listyle");依然不行
//this.setAttribute("style","background:white;color:black;border:1pxdashedgrey");这种可以但不是我想要的方法
}*
}
html部分代码：
#aqi-listli{
background:white;
width:150px;
list-style:none;
line-height:30px;
border:1pxdashedgrey;
text-align:center;
margin-bottom:-1px;
}
.listyle{
background:white;
width:150px;
list-style:none;
line-height:30px;
border:1pxdashedgrey;
text-align:center;
margin-bottom:-1px;
}
css部分代码：
污染城市列表

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('');}