本文目錄導(dǎo)讀：

1. 直接操作元素的style屬性
2. 通過(guò)class來(lái)操作CSS樣式
3. 使用CSSStyleSheet對(duì)象

JavaScript操作CSS樣式的方法

直接操作元素的style屬性

JavaScript可以直接獲取和操作HTML元素的樣式，我們可以通過(guò)JavaScript獲取元素，然后直接通過(guò)元素的style屬性來(lái)設(shè)置或修改CSS樣式。

假設(shè)我們有一個(gè)元素，其id為"myElement"，我們可以如下操作：

var element = document.getElementById('myElement');
element.style.color = 'red';  // 修改文字顏色為紅色
element.style.backgroundColor = '#fff';  // 修改背景色為白色

通過(guò)class來(lái)操作CSS樣式

除了直接操作元素的樣式，我們還可以使用JavaScript來(lái)添加、刪除或切換元素的class，以改變其CSS樣式。

假設(shè)我們有一個(gè)class為"myClass"，我們可以如下操作：

var element = document.getElementById('myElement');
element.classList.add('myClass');  // 添加class
element.classList.remove('myClass');  // 刪除class
element.classList.toggle('myClass');  // 切換class，如果存在則刪除，不存在則添加

使用CSSStyleSheet對(duì)象

對(duì)于更復(fù)雜的樣式操作，我們可以使用CSSStyleSheet對(duì)象，這個(gè)對(duì)象允許我們獲取和修改CSS規(guī)則，不過(guò)，這需要更多的代碼，并且對(duì)于初學(xué)者來(lái)說(shuō)可能比較復(fù)雜。

JavaScript提供了多種方式來(lái)操作CSS樣式，我們可以直接操作元素的style屬性，也可以通過(guò)class來(lái)操作，還可以使用CSSStyleSheet對(duì)象進(jìn)行更復(fù)雜的操作，這些方式使得我們可以在JavaScript中動(dòng)態(tài)地改變網(wǎng)頁(yè)的樣式，從而實(shí)現(xiàn)更豐富、更交互的網(wǎng)頁(yè)效果。