本文目錄導讀：

1. 通過操作DOM元素修改樣式
2. 使用類名操作樣式表

JavaScript與CSS的***結合使得我們可以動態(tài)地修改網頁樣式，提升用戶體驗，下面我們將詳細介紹如何使用JavaScript來動態(tài)修改CSS樣式。

通過操作DOM元素修改樣式

JavaScript可以直接操作DOM元素，通過改變元素的style屬性來修改CSS樣式。

// 獲取元素
var element = document.getElementById('myElement');
// 修改樣式
element.style.color = 'red';
element.style.fontSize = '20px';

這種方式適用于在運行時動態(tài)改變單個元素的樣式。

使用類名操作樣式表

JavaScript還可以通過改變元素的類名來修改CSS樣式，這種方式適用于使用CSS類定義的樣式。

// 獲取元素
var element = document.getElementById('myElement');
// 添加類名
element.classList.add('myClass');
// 移除類名
element.classList.remove('myClass');

通過這種方式，我們可以在CSS中定義多個樣式類，然后在JavaScript中根據(jù)需要動態(tài)添加或移除類名。

三、使用CSSStyleSheet對象修改樣式表

對于更復雜的樣式修改，我們可以使用CSSStyleSheet對象來操作樣式表，這種方式適用于全局修改樣式或創(chuàng)建新的樣式規(guī)則。

// 獲取樣式表
var stylesheet = document.styleSheets[0];
// 添加新的樣式規(guī)則
var rule = stylesheet.insertRule('.myClass { color: red; }', stylesheet.cssRules.length);

這種方式允許我們在運行時動態(tài)添加新的樣式規(guī)則或修改已有的規(guī)則，需要注意的是，這種方式需要正確處理樣式表的索引和規(guī)則的選擇器，以確保修改的是正確的樣式規(guī)則，JavaScript提供了多種方式來實現(xiàn)動態(tài)的CSS樣式修改，我們可以根據(jù)具體需求選擇合適的方式，希望這篇文章能幫助你更好地理解和應用JavaScript來動態(tài)修改CSS樣式。