原生JS给DOM元素增加修改和删除class

之前一直使用jq，处理页面结构变化都很方便，不过在某些不实用jq的项目里，还是必须得知道如何使用原生JS去处理页面中简单的一些样式变化。这里介绍js针对css方面的一些基本操作。

  
    
  
  
    

        hhh
    
    Change
  

增加class

//方法1  如果你的页面里有很多个“temp”类的话  感觉这种不太适合 “classArr ”取出的是类数组
  let classArr =  document.getElementsByClassName("temp");
 classArr[0].classList.add("red");
 
//方法2 通过ID获取
let classAtr = document.getElementById("temp").getAttribute("class");
let newClass = classAtr.concat("  red");	//注意这里有空格哟
document.getElementById("temp").setAttribute("class",newClass);

修改class

let classAtr = document.getElementById("temp").getAttribute("class");
let newClass = classAtr.replace("temp","red");
document.getElementById("temp").setAttribute("class",newClass);

删除class

//方法1  如果你的页面里有很多个“temp”类的话  感觉这种不太适合 “classArr ”取出的是类数组
  let classArr =  document.getElementsByClassName("temp");
 classArr[0].classList.remove("red");
 
//方法2 通过ID获取
let classAtr = document.getElementById("temp").getAttribute("class");
let newClass = classAtr.replace("temp","");
document.getElementById("temp").setAttribute("class",newClass);