在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 使用原生js通過(guò)改變?cè)毓?jié)點(diǎn)類名的方式實(shí)現(xiàn)切換不同的css樣式。

使用原生js通過(guò)改變?cè)毓?jié)點(diǎn)類名的方式實(shí)現(xiàn)切換不同的css樣式。

問(wèn)題在于:嘗試多種方法,只有一種可以達(dá)到效果,但不是我想要的只通過(guò)類名改變css樣式,為什么前幾種方法失?。靠梢灾苯涌磈s代碼最后一部分,為了不影響判斷,把全部代碼貼上。
js代碼如下:

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],  
  ["廣州", 50],
  ["成都", 90],
  ["西安", 100]
];

//第一步:數(shù)組排序
function sortWay(a,b){
  var a = a[1];
  var b = b[1];
  return a-b;
}
aqiData.sort(sortWay);
//第二步:刪除aqiDate>60的數(shù)據(jù)
//方法1:for循環(huán)
 /*
 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);
//第三步:拆分?jǐn)?shù)組,組合輸出語(yǔ)句
//第四步:輸出對(duì)應(yīng)數(shù)據(jù)到頁(yè)面指定位置
for(var j=0;j<newaqi.length;j++){
  //拆分組合輸出的li語(yǔ)句
  var aqitext = "第"+ parseInt(j+1) + "名:" + newaqi[j][0] + "," + newaqi[j][1];
  //獲取父元素節(jié)點(diǎn)
  var ul = document.getElementById("aqi-list");
  var li = document.createElement("li");
  var text = document.createTextNode(aqitext);
  //給新創(chuàng)建的li標(biāo)簽添加文本節(jié)點(diǎn)
  li.appendChild(text);
  //給指定的父元素添加新創(chuàng)建的li標(biāo)簽,實(shí)現(xiàn)網(wǎng)頁(yè)出現(xiàn)數(shù)據(jù)
  ul.appendChild(li);
  //diy練習(xí)
  //鼠標(biāo)事件,懸移ok;
  li.onmouseover = function(){
    this.setAttribute("style","background:black;color:green;border:1px solid white");
  }
  *//鼠標(biāo)事件,通過(guò)更改li類名來(lái)達(dá)到移開(kāi)樣式恢復(fù)的效果失?。。。。?!原因未知?
  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>
回答
編輯回答
絯孑氣

一開(kāi)始改變?cè)氐?code>style屬性,后來(lái)想通過(guò)添加class改變,你這種寫(xiě)法肯定是不可以的,行內(nèi)樣式權(quán)重高于類的,行內(nèi)樣式會(huì)覆蓋類上面的樣式。

三種方法:

  1. 設(shè)置class里面的樣式!important
  2. 一開(kāi)始移入的時(shí)候就通過(guò)加class的方式改變
  3. 之后通過(guò)改變style的形式。

按你的意思肯定是想要第二種,兩個(gè)簡(jiǎn)單的hasClassaddClass方法。


// 判斷類是否在該元素中存在
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(' ');
}
2017年3月5日 02:06
編輯回答
初心

因?yàn)槟阋婚_(kāi)始給li添加樣式的時(shí)候,是添加的行內(nèi)樣式,鼠標(biāo)移開(kāi)的時(shí)候,添加的是一個(gè)class類,最后編譯解析的時(shí)候,還是以行內(nèi)樣式為主,因?yàn)樾袃?nèi)樣式的權(quán)值更高。樣式的權(quán)值百度一下就能了解,順便推薦個(gè)方法removeClass()addClass()

2018年5月3日 16:20