JavaScript 是一種廣泛應用于網頁開發的編程語言，它能夠讓你輕松地對網頁進行動態操縱。其中一項重要的操縱方式就是通過給元素添加樣式來改變網頁的外觀。在本文中，我們將重點介紹如何使用 JavaScript 來添加樣式。 在 JavaScript 中，可以使用以下兩種方式來添加樣式： 1. 直接修改樣式屬性 2. 添加樣式類 我們通過以下兩個例子來說明：

這是一個示例段落。

這是另外一個示例段落。

### 直接修改樣式屬性 我們可以通過直接修改元素的 style 屬性來添加樣式。例如，我們可以使用如下代碼為例子1添加樣式：

const example1 = document.getElementById('example1');
example1.style.color = 'red';
example1.style.backgroundColor = 'yellow';
example1.style.fontSize = '20px';

以上代碼將把 example1 元素的文字顏色設置為紅色，背景顏色設置為黃色，字體大小設置為20像素。效果如下：

這是一個示例段落。

同樣的，我們可以使用以下代碼為 example2 元素添加樣式：

const example2 = document.getElementById('example2');
example2.style.border = '1px solid blue';
example2.style.padding = '10px';
example2.style.margin = '20px';

以上代碼將把 example2 元素添加一個1像素寬度的藍色邊框，內部填充為10像素，外邊距為20像素。效果如下：

這是另外一個示例段落。

### 添加樣式類 如果我們需要添加多個樣式屬性，那么使用直接修改樣式屬性的方式可能會產生冗長的代碼。此時，我們可以通過添加樣式類來更好地管理樣式。 首先，我們需要在 CSS 中定義好樣式類。例如，我們定義一個名為 "example" 的樣式類：

.example {
color: red;
background-color: yellow;
font-size: 20px;
}

接下來，我們可以使用以下代碼為 example1 元素添加該樣式類：

const example1 = document.getElementById('example1');
example1.classList.add('example');

以上代碼會把 "example" 樣式類添加到 example1 元素上。效果與第一個例子相同。 同樣的，我們可以定義一個名為 "example2" 的樣式類，并使用以下代碼為 example2 元素添加該樣式類：

.example2{
border: 1px solid blue;
padding: 10px;
margin: 20px;
}
const example2 = document.getElementById('example2');
example2.classList.add('example2');

以上代碼會把 "example2" 樣式類添加到 example2 元素上。效果同第二個例子相同。 總結： JavaScript 可以通過直接修改樣式屬性和添加樣式類來添加樣式。如果需要添加多個樣式屬性，建議使用樣式類的方式，以便更好地管理代碼。