在JavaScript中，我們可以通過操作CSS樣式來更改網(wǎng)頁的外觀和布局，以下是一些常見的操作方式：
1、獲取元素并修改樣式：
我們可以使用document.getElementById或document.querySelector來獲取元素，然后通過修改其style屬性來更改樣式。
```javascript
const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.backgroundColor = 'blue';
```
2、使用CSS類：
我們可以創(chuàng)建CSS類，并通過JavaScript動態(tài)地添加或移除這些類。
```javascript
const element = document.getElementById('myElement');
element.classList.add('myClass'); // 添加類
element.classList.remove('myClass'); // 移除類
```
3、操作CSS屬性：
我們可以直接操作CSS屬性來更改樣式，這種方式適用于需要***控制樣式的情況。
```javascript
const element = document.getElementById('myElement');
element.style.border = '1px solid red'; // 設(shè)置邊框樣式
element.style.padding = '10px'; // 設(shè)置內(nèi)邊距
```
4、使用CSSStyleSheet：
我們可以獲取CSSStyleSheet對象，并動態(tài)地添加或移除規(guī)則，這種方式適用于需要全局更改樣式的情況。
```javascript
const stylesheet = document.styleSheets[0]; // 獲取***個樣式表
stylesheet.insertRule('body { background-color: blue; }', 0); // 在規(guī)則集的開始處添加規(guī)則
```
5、使用CSS變量：
我們可以使用CSS變量（也稱為自定義屬性）來存儲和傳遞樣式信息，這種方式適用于需要靈活控制樣式的情況。
```javascript
:root {
--main-color: blue;
--background-color: white;
}
body {
background-color: var(--background-color);
color: var(--main-color);
}
```
然后通過JavaScript更改這些變量的值來更新樣式：
```javascript
document.documentElement.style.setProperty('--main-color', 'red'); // 更改主顏色為紅色
```
是一些常見的在JavaScript中操作CSS樣式的方法，根據(jù)具體的需求和場景，我們可以選擇***適合的方式來更改網(wǎng)頁的樣式。
