问题在于:尝试多种方法,只有一种可以达到效果,但不是我想要的只通过类名改变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<aqiData.length;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<newaqi.length;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部分代码:
<h3>污染城市列表</h3>
<ul id="aqi-list">
<a class="listyle"></a>
</ul>
一开始改变元素的style
属性,后来想通过添加class
改变,你这种写法肯定是不可以的,行内样式权重高于类的,行内样式会覆盖类上面的样式。
三种方法:
class
里面的样式!important
。class
的方式改变style
的形式。按你的意思肯定是想要第二种,两个简单的hasClass
和addClass
方法。
// 判断类是否在该元素中存在
funtion hasClass (elm, cls) {
var reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
return reg.test(element.className)
}
// 添加类
function addClass (elm, cls) {
if (hasClass(elm, cls)) {
return;
}
var newClass = elm.className.split(' ');
newClass.push(cls);
element.className = newClass.join(' ');
}