JavaScript是一種可以修改HTML和CSS的腳本語言，使用JavaScript可以實現動態的頁面交互和效果展示。本文將重點介紹JavaScript如何修改CSS樣式，通過實例演示，來幫助讀者更好的掌握這一技能。

一個最簡單的CSS樣式修改例子就是改變一個元素的背景色。我們可以使用JavaScript選中這個元素，然后修改其樣式中的背景色屬性值。代碼如下：

// 選中元素
var element = document.getElementById("box");
// 修改背景色
element.style.backgroundColor = "red";

在這個例子中，我們選中了一個ID為box的元素，然后將其背景色改成了紅色。這種修改方式不僅可以修改背景色，還可以修改元素的字體顏色、字體大小、邊框樣式等等。

除了直接修改元素的樣式屬性，我們還可以通過新建一個樣式表，動態地向其中添加規則，從而達到動態修改樣式的效果。代碼如下：

// 新建一個style元素
var styleEl = document.createElement("style");
document.head.appendChild(styleEl);
// 新建一個css規則
var rule = "#box { background-color: red }";
// 向style元素中添加規則
styleEl.sheet.insertRule(rule, 0);

在這個例子中，我們新建了一個style元素，然后在其中添加了一個ID選擇器規則，將其背景色改為紅色。這種方式更加靈活，可以針對不同的元素添加不同的規則，實現個性化的界面效果。

除了上述兩種方式，我們還可以通過添加或刪除className，來動態地改變元素的樣式。代碼如下：

// 選中元素
var element = document.getElementById("box");
// 添加className
element.classList.add("red-bg");
// 刪除className
element.classList.remove("red-bg");

在這個例子中，我們先選中了一個ID為box的元素，然后添加了一個叫red-bg的className，被添加的className中包含了一個背景色的規則，將其背景色改為紅色。之后我們又刪除了這個className，使其恢復到之前的樣式。這種方式可以簡便地實現樣式的添加和刪除，靈活應用于各種交互場景。

綜上所述，JavaScript可以通過直接修改元素的樣式屬性、向樣式表中添加規則、添加或刪除className，來實現CSS樣式的動態修改。我們可以根據實際需求采用不同的方法，來實現不同的交互效果。以上幾種方法只是冰山一角，讀者可以通過更多的學習和實踐，豐富自己的JavaScript技能和應用場景。