這篇文章主要介紹HTML5中classList屬性操作CSS類的使用方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

發展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務至上”的服務理念，堅持“二合一”的優良服務模式，真誠服務每家企業，認真做好每個細節，不斷完善自我，成就企業，實現共贏。行業涉及成都玻璃隔斷等，在重慶網站建設、全網營銷推廣、WAP手機網站、VI設計、軟件開發等項目上具有豐富的設計經驗。

前言

以前我們有需要用js或jquery的一些方法hasClass、addClass、removeClass，在一個元素的class屬性上添加或者刪除某幾個類，達到某種樣式變化的需求，但還是稍微麻煩了一些。
h6新增的classList可以讓我們更方便的元素的類名進行操作。

注意

classList兼容性有些差，不兼容ie10以下的ie瀏覽器。

示例

    
    
    



點擊按鈕為p元素添加 "mystyle" 類。
點我

    我是一個 p 元素。

新增類

使用add方法，你可以往頁面元素是新增一個或多個類：

document.getElementById("myp").classList.add("mystyle");

刪除一個類

使用remove方法，你可以刪除單個CSS類：

document.getElementById("myp").classList.remove("mystyle");

在元素中切換類名

在元素中切換類名。使用toggle方法,語法：toggle(class, true|false)

第一個參數為要在元素中移除的類名，并返回 false。

如果該類名不存在則會在元素中添加類名，并返回 true。

第二個是可選參數，設置布爾值用于設置元素是否強制添加或移除類，不管該類名是否存在。例如：

移除一個

document.getElementById("myp").classList.toggle("classToRemove", false);

添加一個

 document.getElementById("myp").classList.toggle("classToAdd", true);

注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二個參數

檢查是否含有某個類

使用contains方法，判斷某個類是否存在，返回布爾值。

 //returns true or false
 document.getElementById("myp").classList.contains("myp");

以上是“HTML5中classList屬性操作CSS類的使用方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！