原生js删除增加修改class属性

其实html5已经扩展了class操作的相关API，其中classList属性就以及实现了class的增删和判断。

HTML DOM classList 属性

classList属性的方法有：

• add(value) 添加类名，如果有则不添加
• contains(value) 判断是否存在类名，返回Boolean值
• remove(value) 从列表中删除类名
• toggle(value) 切换类名：如果列表中存在则删除，否则添加

---

根据红宝书的介绍，目前支持classList属性的浏览器有FireFox 3.6+和Chrome。因此为了更好的兼容性，我们可以自己手动实现这几个方法。
这里利用了DOM属性 className，我们始终是在操作这个对象。

function hasClass( elements,cName ){ 
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); 
}; 
function addClass( elements,cName ){ 
  if( !hasClass( elements,cName ) ){ 
    elements.className += " " + cName; 
  }; 
}; 
function removeClass( elements,cName ){ 
  if( hasClass( elements,cName ) ){ 
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
  }; 
};





附加：

1.  
   var div=document.querySelector("div");
2.  
   console.log(div);
3.  
   console.log(div.classList);
4.  
   div.classList.remove("box");
5.  
   console.log(div);

classList.remove();可以实现移除任意一个class名。

直接通过dom语法来修改HTML的css属性

ument.getElementById("btn1").setAttribute("class","btn btn-primary");
document.getElementById("btn1").className = "btn btn-primary";//btn btn-primary可以改为任意新的class值

 

可以通过jquery来获得class属性和移除class属性
获得class属性
document.getElementById('region').className;//表示获取id为region的div的class值
移除class属性
document.getElementById('region').className = "";//表示将id为btn1的按钮的class属性值设置为空

 

HTML DOM 参考手册: document.querySelector()

HTML DOM 参考手册: element.querySelectorAll()