原生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()