原生DOM改變CSS樣式的幾種方式
在原生JavaScript中，我們可以通過幾種方式改變CSS樣式，以下是一些常見的方法：
1、直接操作樣式表：
我們可以直接獲取到CSS樣式表，然后修改其中的規(guī)則，這種方式適用于對(duì)全局樣式進(jìn)行更改。
```javascript
var styleSheet = document.styleSheets[0];
styleSheet.insertRule('body { background-color: blue; }', 0);
```
2、操作單個(gè)元素的樣式：
對(duì)于特定的元素，我們可以直接修改其style屬性來更改樣式。
```javascript
var element = document.getElementById('myElement');
element.style.backgroundColor = 'blue';
```
3、使用類名動(dòng)態(tài)更改樣式：
我們可以為元素添加或移除類名，以動(dòng)態(tài)地更改樣式。
```javascript
var element = document.getElementById('myElement');
element.classList.add('myClass'); // 添加類名
element.classList.remove('myClass'); // 移除類名
```
4、操作CSS變量：
如果使用了CSS變量（也稱為自定義屬性），可以在JavaScript中動(dòng)態(tài)地更改這些變量的值。
```javascript
var element = document.getElementById('myElement');
element.setAttribute('--my-variable', 'blue'); // 設(shè)置CSS變量
```
5、使用動(dòng)畫和過渡：
JavaScript還可以用來控制CSS動(dòng)畫和過渡效果。
```javascript
var element = document.getElementById('myElement');
element.style.transition = 'background-color 1s'; // 設(shè)置過渡效果
element.style.backgroundColor = 'blue'; // 更改背景顏色
```
是一些常用的方法，可以根據(jù)具體的需求選擇適合的方式，原生JavaScript提供了豐富的API來操作CSS樣式，使得動(dòng)態(tài)地更改樣式變得更加簡單和靈活。
