JavaScript中如何使用CSS樣式
在JavaScript中，我們可以使用多種方法來應用CSS樣式，以下是一些常見的方法：
1、直接操作樣式表：
我們可以通過JavaScript直接訪問和修改HTML元素的樣式表，假設我們有一個元素，其id為"myElement"，我們可以這樣修改其顏色：
```javascript
document.getElementById('myElement').style.color = 'red';
```
這將把元素"myElement"的顏色設置為紅色。
2、使用CSS類：
我們可以使用JavaScript來添加、移除或切換CSS類，假設我們有一個類名為"myClass"的CSS類，我們可以這樣操作：
```javascript
// 添加類
document.getElementById('myElement').classList.add('myClass');
// 移除類
document.getElementById('myElement').classList.remove('myClass');
// 切換類
document.getElementById('myElement').classList.toggle('myClass');
```
這將根據(jù)類的當前狀態(tài)添加、移除或切換元素"myElement"的"myClass"類。
3、使用CSS偽類：
與CSS類類似，我們還可以使用JavaScript來操作CSS偽類，假設我們有一個元素，其id為"myElement"，我們可以這樣設置其懸停顏色：
```javascript
document.getElementById('myElement').style.backgroundColor = 'yellow'; // 設置懸停背景顏色為黃色
```
這將使得當鼠標懸停在元素"myElement"上時，其背景顏色變?yōu)辄S色。
4、使用樣式對象：
我們可以創(chuàng)建一個樣式對象，并將其應用于一個或多個元素。
```javascript
var styleObj = { color: 'blue', fontSize: '14px' }; // 創(chuàng)建樣式對象
document.getElementById('myElement').style = styleObj; // 應用樣式對象到元素上
```
這將把元素"myElement"的顏色設置為藍色，字體大小設置為14像素。
5、使用CSSStyleSheet對象：
我們可以使用JavaScript來動態(tài)創(chuàng)建、編輯或刪除CSS規(guī)則。
```javascript
var styleSheet = document.styleSheets[0]; // 獲取***個樣式表對象
styleSheet.insertRule('body { color: green; }', 0); // 在樣式表中插入新規(guī)則，設置body顏色為綠色
```
這將使得整個文檔的顏色變?yōu)榫G色，注意，這種方法可能會影響整個文檔的外觀，因為它會覆蓋所有現(xiàn)有的樣式規(guī)則。
