對于前端開發來說，JavaScript 的事件處理是非常重要的一部分，通過添加事件處理程序，可以實現頁面的交互和動態效果。在此基礎上，我們還可以使用 JavaScript 來操作頁面的樣式，實現更加豐富的效果。下面，我們就來介紹一下如何使用 JavaScript 添加 CSS 樣式。

var element = document.getElementById("example");  //獲取元素
element.style.backgroundColor = "red";  //改變背景色
element.style.color = "white";  //改變字體顏色

在上面的代碼中，我們首先通過 getElementById() 方法獲取到需要進行操作的元素，在這里假設 ID 為 example。然后，我們可以使用 .style 屬性來添加 CSS 樣式。例如，我們可以將背景色更改為紅色，使用 element.style.backgroundColor = "red"; 就可以實現。

除了背景色之外，我們還可以使用 .style 屬性來更改其他的樣式，比如字體顏色、字體大小、邊距、內邊距、圓角等等。請注意，所有的樣式屬性都需要使用駝峰命名法，例如 background-color 變成了 backgroundColor。

element.style.fontSize = "20px";  //改變字體大小
element.style.margin = "10px";  //改變邊距
element.style.padding = "5px";  //改變內邊距
element.style.borderRadius = "50%";  //添加圓角

除了使用 .style 屬性之外，我們還可以使用 .classList 屬性來添加 CSS 類。這個方法相對來說更加靈活，因為我們可以直接在 CSS 中定義類的樣式，然后通過 JavaScript 來添加這個類。例如，我們可以在 CSS 中定義以下樣式：

.highlight {
background-color: yellow;
color: black;
}

然后，在 JavaScript 中添加這個類：

element.classList.add("highlight");

代碼執行后，就會給元素添加上 .highlight 類，從而實現樣式的更改。