JavaScript 能夠與 CSS 配合使用，實現對頁面的動態控制。通過 JavaScript，我們可以直接修改 HTML 元素的樣式，完成一些動態效果，這種修改樣式的方法成為“行內樣式”。

例如，我們可以使用document.getElementById("demo").style.color = "red";來修改 id 為 demo 的元素的顏色。通過這種方式，我們能夠實現更靈活的頁面效果。除了通過行內樣式修改 CSS， JavaScript 還可以修改已經存在于 css 文件中的樣式。

在 css 文件中，我們可以將樣式聲明為 class 或 id，然后在 HTML 元素中使用這些 class 或 id。比如，我們可以將一個按鈕的樣式封裝成一個 btn 類，并在一個class="btn"的按鈕中使用它。

/* CSS 文件 */
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

<!-- HTML 文件 -->
<button class="btn">Click me</button>

這樣就可以非常方便地對整個頁面中的按鈕進行樣式統一。但是，有時候你想要動態地修改一個按鈕的樣式，以達到某種交互效果。在這種情況下，我們可以用 JavaScript 修改該按鈕的 class。

document.getElementById("myBtn").className = "newBtn";

以上代碼中，我們先獲取了 id 為 myBtn 的元素，然后將其 class 修改為 newBtn，從而應用新的樣式。

除了修改 class，我們還可以使用 JavaScript 直接修改元素的 style 屬性。在這種情況下，我們要注意將樣式聲明為駝峰命名法。例如，我們可以使用以下代碼修改一個元素的寬度：

document.getElementById("myDiv").style.width = "50%";

當然，如果你需要動態地修改多個樣式，可以直接使用 cssText。

document.getElementById("myDiv").style.cssText = "width:50%;height:50%";

在使用 cssText 時，注意要使用分號隔開每個樣式，每個屬性名和值之間要使用冒號分隔。

除了以上介紹的方法，還有一些更靈活的修改 CSS 樣式的方法，例如使用 jQuery 的 css() 方法。不過，無論是哪種方法，它們都讓我們能夠更靈活地控制頁面的樣式，為用戶帶來更好的交互體驗。