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

问题在于：尝试多种方法，只有一种可以达到效果，但不是我想要的只通过类名改变css样式，为什么前几种方法失败？可以直接看js代码最后一部分，为了不影响判断，把全部代码贴上。

js代码如下：

var aqiData = [

["北京", 90],

["上海", 50],

["福州", 10],

["广州", 50],

["成都", 90],

["西安", 100]

];

//第一步：数组排序

function sortWay(a,b){

var a = a[1];

var b = b[1];

return a-b;

}

aqiData.sort(sortWay);

//第二步：删除aqiDate>60的数据

//方法1：for循环

/*

for(var i=0;i

if(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

function isenoughsmall(value){

return value[1]<=60;

}

var newaqi = aqiData.filter(isenoughsmall);

//console.log(newaqi);

//第三步：拆分数组，组合输出语句

//第四步：输出对应数据到页面指定位置

for(var j=0;j

//拆分组合输出的li语句

var aqitext = "第"+ parseInt(j+1) + "名：" + newaqi[j][0] + "," + newaqi[j][1];

//获取父元素节点

var ul = document.getElementById("aqi-list");

var li = document.createElement("li");

var text = document.createTextNode(aqitext);

//给新创建的li标签添加文本节点

li.appendChild(text);

//给指定的父元素添加新创建的li标签，实现网页出现数据

ul.appendChild(li);

//diy练习

//鼠标事件，悬移ok；

li.onmouseover = function(){

this.setAttribute("style","background:black;color:green;border:1px solid white");

}

*//鼠标事件，通过更改li类名来达到移开样式恢复的效果失败！！！！！原因未知？

li.onmouseout = function(){

//this.setAttribute("class","listyle");更改属性也不行

//this.className = "listyle";不成功

// document.li.classList.add("listyle");依然不行

//this.setAttribute("style","background:white;color:black;border:1px dashed grey");这种可以但不是我想要的方法

}*

}

html部分代码：

#aqi-list li{

background:white;

width:150px;

list-style:none;

line-height:30px;

border:1px dashed grey;

text-align:center;

margin-bottom:-1px;

}

.listyle{

background:white;

width:150px;

list-style:none;

line-height:30px;

border:1px dashed grey;

text-align:center;

margin-bottom:-1px;

}

css部分代码：

污染城市列表