JavaScipt 操作 CSS class 是 Web 前端開發中經常用到的技術。通過 JavaScript 可以很方便地增加、刪除、替換和切換元素的 CSS class。下面將詳細介紹 JavaScript 如何操作 CSS class。

1、使用 JavaScript 增加 CSS class

使用 JavaScript 增加 CSS class，需要通過元素的 classList 屬性進行操作。例如，下面的代碼示例通過 JavaScript 增加了一個 “red” 的 CSS class。

var element = document.getElementById("my-div");
element.classList.add("red");

2、使用 JavaScript 刪除 CSS class

刪除 CSS class 也非常簡單，可以通過元素的 classList 屬性進行操作。如下所示，通過 remove() 方法刪除其中的一個 class。

var element = document.getElementById("my-div");
element.classList.remove("red");

3、使用 JavaScript 替換元素的 CSS class

通過 JavaScript 進行 CSS class 的替換需要使用 replace() 方法。如下所示，通過 replace() 方法將原有的 “red” class 替換成 “blue” class。

var element = document.getElementById("my-div");
element.classList.replace("red", "blue");

4、使用 JavaScript 切換 CSS class

切換 CSS class 可以使用 toggle() 方法實現。如下所示，通過 toggle() 方法來添加或者刪除一個元素的 CSS class。

var element = document.getElementById("my-div");
element.classList.toggle("blue");

上述代碼中，如果 “blue” CSS class 已經存在，那么它將被刪除，否則將被添加。

5、操作多個元素的 CSS class

當需要對多個元素進行 CSS class 的操作時，可以使用 getElementsByClassName() 方法獲取指定 class 的元素，然后通過 for 循環進行操作。

var elements = document.getElementsByClassName("my-class");
for(var i = 0; i< elements.length; i++) {
elements[i].classList.add("new-class");
}

上述代碼中，通過 getElementsByClassName() 方法獲取所有 class 為 “my-class” 的元素，并將它們的 CSS class 替換成 “new-class”。

綜上所述，JavaScript 操作 CSS class 可以幫助我們更好地控制頁面的樣式和動態效果，從而提高用戶體驗和網站的美觀程度。