JavaScript (JS) 和 Cascading Style Sheets (CSS) 是兩種常見的 Web 開發技術。在開發過程中，JS 通過操作 DOM 對 HTML 元素進行增刪改查。而 CSS 是一種用來美化網頁的樣式語言，經常使用在網頁排版、顏色和字體等方面。在本文中，我們將學習如何使用 JS 為 HTML 元素添加 CSS 類樣式。

在 JS 中，我們可以通過document.querySelector()方法選擇 DOM 元素。例如，要添加 CSS 類樣式到 ID 為example的元素上，可以使用以下代碼：

const element = document.querySelector("#example");
element.classList.add("new-class");

這里的classList屬性是一個只讀的類數組對象，它包含了元素的所有 CSS 類。我們可以使用add()方法向該數組添加新的樣式類。需要注意的是，這里的new-class指的是在 CSS 樣式表中定義好的樣式。

如果需要移除 CSS 類樣式，可以使用remove()方法。例如：

const element = document.querySelector("#example");
element.classList.remove("old-class");

這里的old-class表示要移除的 CSS 類樣式。

除了添加和移除 CSS 類樣式，我們還可以使用toggle()方法來切換 CSS 類的狀態。例如：

const element = document.querySelector("#example");
element.classList.toggle("transparent");

這里的transparent是一個定義好的 CSS 類樣式，用來設置元素的透明度。如果該元素已經包含了該類，那么該類就會被移除；否則，該類會被添加到該元素中。

總結來說，使用 JS 為 HTML 元素添加 CSS 類樣式非常簡單，只需要使用classList屬性的相關方法即可。這種方法是一種更為靈活的方式來控制網頁的樣式，可以動態地改變元素的外觀和交互效果。