本文目錄導讀：

1. 直接修改元素樣式
2. 修改CSS類
3. 使用CSSOM（CSS對象模型）

通過JavaScript改變CSS的方法

JavaScript和CSS是前端開發(fā)中常用的兩種技術，它們可以相互協作，實現豐富的網頁效果，JavaScript可以通過操作DOM（文檔對象模型）來動態(tài)改變CSS的樣式。

直接修改元素樣式

JavaScript可以直接獲取到網頁中的元素，并修改其樣式，我們可以通過JavaScript將元素的背景色改為藍色：

document.getElementById("myElement").style.backgroundColor = "blue";

修改CSS類

JavaScript還可以通過修改元素的類名來改變其樣式，我們可以先定義一個CSS類，然后通過JavaScript將元素的類名改為該CSS類對應的名稱：

// 定義一個CSS類
document.styleSheets[0].insertRule(".myClass { background-color: blue; }", 0);
// 獲取元素并修改其類名
var element = document.getElementById("myElement");
element.className = "myClass";

使用CSSOM（CSS對象模型）

CSSOM是W3C定義的一個接口，它允許JavaScript動態(tài)地訪問和修改CSS的樣式信息，通過CSSOM，我們可以獲取到元素的樣式表，并修改其中的樣式規(guī)則：

// 獲取元素的樣式表
var styleSheet = document.styleSheets[0];
// 定義一個樣式規(guī)則
var rule = styleSheet.insertRule("div { background-color: blue; }", styleSheet.length);
// 應用樣式規(guī)則到元素
var element = document.getElementById("myElement");
element.styleSheet = styleSheet;

通過以上三種方式，JavaScript可以實現對CSS樣式的動態(tài)修改，從而實現豐富的網頁交互效果。